Advanced CSS Chapter 8 Layout
Advanced CSS
Chapter 8 Layout
All these CSS layout techniques rely on three basic concepts: positioning, floating, and margin
manipulation. The different techniques really aren’t that different, and if you understand the core
concepts, it is relatively easy to create your own layouts with little or no hassle. In fact, layout is
generally the easiest part of CSS; it’s all the tweaking that takes time.
In this chapter, you will learn about
- Horizontally centering a design on a page
- Creating two- and three-column float-based layouts
- Creating fixed-width, liquid, and elastic layouts
- Creating equal height columns
- CSS frameworks versus CSS systems
Planning your layout
Setting the foundations
Centering a design using margins(使用自动空白边让设计居中)
Say you have a typical layout where you wish to center a wrapper div horizontally on the screen:
<body>
<div class="wrapper">
</div>
</body>
To do this, you simply define the width of your wrapper div and set the horizontal margins to
auto:
.wrapper {
width: 920px;
margin: 0 auto;
}
This works on all modern browsers. However, IE 5.x and IE 6 in quirks mode don’t honor the
margin:auto declaration. Luckily, IE misunderstands text-align: center, centering everything
instead of just the text. You can use this to your advantage by centering everything in the body
tag, including the wrapper div, and realigning the contents of the wrapper back to the left:
body {
text-align: center;
}
.wrapper {
width: 920px;
margin: 0 auto;
text-align: left;
}
Using the text-align property in this way is a hack—but a fairly innocuous hack that has no
adverse effect on your site. The wrapper now appears centered in older versions of IE as well as
more standards-compliant browsers.
使用定位和负值空白边让设计居中
首先定义容器的宽度。然后将容器的position设置为relative：
#warpper{
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
Float-based layouts
There are a few different ways of doing CSS-based layout, including absolute positioning and
using negative margins. I find float-based layouts the easiest and most reliable method to use. As
the name suggests, in a float-based layout, you simply set the width of the elements you want to
position and then float them left or right.
Two-column floated layout
To create a two-column layout inside our content area, we first need to create our basic HTML
structure.
<div class="content">
<div class="primary">
<!-- main content goes here -->
</div>
<div class="secondary”>
<!--navigation and secondary content goes here -->
</div>
Although this wouldn’t be a
problem if browsers behaved themselves, buggy browsers can cause tightly packed layouts to
break, forcing columns to drop below each other.
This can happen on IE because it honors the size of an element’s content, rather than the size of
the element itself. In standards-compliant browsers, if the content of an element gets too large, it
will simply flow out of the box. However, on IE, if the content of an element becomes too big, the
whole element expands. This can be triggered by the smallest things, such as some of your text
being set in italic. If this happens in very tightly packed layouts, there is no longer enough room
for the elements to sit next to each other, and one of the floats will drop. Other IE bugs, such as
the 3-pixel text jog bug and the double-margin float bug (see Chapter 9), along with various
browser-rounding errors can also cause float dropping.
To prevent your layouts from breaking, you need to avoid cramming floated layouts into their
containing elements. Rather than using horizontal margin or padding to create gutters, you can
create a virtual gutter by floating one element left and one element right (see Figure 8-6). If one
element inadvertently increases in size by a few pixels, rather than immediately running out of
horizontal space and dropping down, it will simply grow into the virtual gutter.
The CSS for achieving this layout is very straightforward. You simply set the desired width of
each column and then float the secondary content left and the primary content right. You also
need to add a small amount of padding to the primary content to prevent the enclosed text being
flush to the right hand edge of the element. You’ll notice that I’ve also added display:inline to
all the floated items. This is a defensive measure to prevent the double margin float bug in IE
(more on that in the next chapter).
.content .primary {
width: 650px;
padding-right: 20px;
float: right;
display: inline;
}
.content .secondary {
width: 230px;
float: left;
display: inline;
}
As the total width available is 920 pixels, these dimensions leave a 20-pixel wide virtual gutter
between each floated element. As mentioned previously, doing this protects the layout from float
drops due to accidental content expansion.
Because these elements are floated, they no longer take up any space in the flow of the
document, causing the footer to rise up. In order to prevent this, you need to clear the floated
items by applying the overflow method to their parent element, in this case the content div.
.content {
overflow: hidden;
}
Three-column floated layout
The HTML needed to create a three-column layout is very similar to that used by the two-column
layout, the only difference being the addition of two new divs inside the primary content div: one
for the main content and one for the secondary content. Therefore, we can reuse our flexible
primary and secondary class names again.
<div class="content">
<div class="primary">
<div class="primary">
<-- your primary primary content goes here -->
</div>
<div class="secondary">
<-- your secondary primary content goes here -->
</div>
</div>
<div class="secondary”>
<!--navigation and secondary content goes here -->
</div>
</div>
As before, the CSS for this is very simple. You just set your desired widths and then float the
primary div left and the secondary div right, creating a 20-pixel gap in the middle:
.content .primary .primary {
width: 400px;
float: left;
display: inline;
}
.content .primary .secondary {
width: 230px;
float: right;
display: inline;
}
One thing you’ll notice is that the right-hand padding we gave to the primary div in the in the first
example is now being applied to our new primary div in the second example. As such, we need to remove
the pading from the more general style and apply it to the more specific style.
.content .primary {
width: 670px; /* width increased and padding removed*/
float: right;
display: inline;
}
.content .secondary {
width: 230px;
float: left;
display: inline;
}
.content .primary .primary {
width: 400px;
float: left;
display: inline;
}
.content .primary .secondary {
width: 230px;
padding-right: 20px; /* padding applied here instead*/
float: right;
display: inline;
}
Fixed-width, liquid, and elastic layout（固定宽度、流体和弹性布局）
Liquid layouts
With liquid layouts, dimensions are set using percentages instead of pixels. This allows liquid
layouts to scale in relation to the browser window. As the browser window gets bigger, the
columns get wider. Conversely, as the window gets smaller, the columns will reduce in width.
Liquid layouts make for very efficient use of space, and the best liquid layouts aren’t even
noticeable.
However, liquid layouts are not without their own problems. At small window widths, line lengths
can get incredibly narrow and difficult to read. This is especially true in multicolumn layouts. As
such, it may be worth adding a min-width in pixels or ems to prevent the layout from becoming
too narrow. However, set the min-width too large and your liquid designs inherit the same
constraints as their fixed-width cousins.
However if you want to be more precise, take a look at your browser
stats to calculate the most common window size and then pick a wrapper percentage that
matches how the fixed width version would look at that size. A good tool for this is Liquid Fold
(http://liquidfold.net/). For example, if your designer used a width of 960 pixels and the
majority of your users have their browser windows set to 1250 pixels, the percentage to use
would be (960 ÷ 1250) × 100 = 76.8 percent.
Next, set the width of the primary and secondary content areas as a percentage of the wrapper
width. In the previous example, the width of our primary content div was 670 pixels. As the total
width was 920 pixels, this works out as 72.82 percent. Similarly, the width of the secondary
content div works out at exactly 25 percent. This leaves a 2.18 percent virtual gutter between the
navigation and the wrapper to deal with any rounding errors and width irregularities that may
occur:
.wrapper {
width: 76.8%;
margin: 0 auto;
text-align: left;
}
.content .primary {
width: 72.82%;
float: right;
display: inline;
}
.content .secondary {
width: 25%;
float: left;
display: inline;
}
Because this layout scales so nicely, there isn’t any need to add a max-width property. However,
to ensure the lines of text remain a readable length, it’s always a good idea to add a max-width in
ems. The layout does start to get a little cramped at smaller window sizes, so I’m going also to
add a min-width in ems as well.
.wrapper {
width: 76.8%;
margin: 0 auto;
text-align: left;
max-width: 125em;
min-width: 62em;
}
Elastic layouts
While liquid layouts are useful for making the most of the available space, line lengths can still get
uncomfortably long on high-resolution monitors. Conversely, lines can become very short and
fragmented in narrow windows or when the text size is increased a couple of steps. If these
limitations are of concern, elastic layouts may be your solution.
Elastic layouts work by setting the width of elements relative to the size of the font instead of the
width of the browser. By setting widths in ems, you ensure that when the font size is increased
the whole layout scales. This allows you to keep line lengths to a readable size and is particularly
useful for people with reduced vision or cognitive disorders.
Elastic layouts are much easier to create than liquid layouts as all of the HTML elements
essentially stay in the same place relative to each other; they just all increase in size. Turning a
fixed-width layout into an elastic layout is a relatively simple task. The trick is to set the base font
size so that 1 em roughly equals 10 pixels.
The default font size on most browsers is 16 pixels. Ten pixels works out at 62.5 percent of 16
pixels, so setting the font size on the body to 62.5% does the trick:
body {
font-size: 62.5%;
text-align: center;
}
Because 1 em now equals 10 pixels at the default font size, we can convert our fixed-width layout
into an elastic layout relatively easily. In previous editions of this book, I recommended setting all
the widths in ems. However, my esteemed colleague and technical reviewer Natalie Downe
suggested keeping the internal widths as percentages and only setting the wrapper width in ems.
That way, the internal widths will still size themselves relative to the font size. This allows you to
change the overall size of the layout without having to change the width on each individual
element, making for a more flexible and maintainable solution.
.wrapper {
width: 92em;
max-width: 95%;
margin: 0 auto;
text-align: left;
}
.content .primary {
width: 72.82%;
float: right;
display: inline;
}
.content .secondary {
width: 25%;
float: left;
display: inline;
}
.content .primary .primary {
width: 59.7%;
float: left;
display: inline;
}
.content .primary .secondary {
width: 34.33%;
padding-right: 2em;
float: right;
display: inline;
}