CSS Layouts - Pro CSS Techniques - page 119

The problem with this approach to layout (and the horrible workarounds that we've sug-
gested might be solutions) involves the way that absolutely positioned items work. As we
mentioned earlier, when you set something to be positioned absolutely, you remove it from
the flow of the document. This has the effect of making containing elements pay no attention
to the dimensions of the items that are inside it, because you've effectively taken them out.
Imagine, if you will, three balloons. Somehow you've managed to place two balloons
inside the third balloon so that you can still get to the necks of those two inner balloons. Not
only are you a genius for managing to do that, but you also have a powerful set of lungs and
can blow both of those balloons up quite easily. What happens? The outer balloon stretches as
the inner ones are inflated. This is what happens in a “normal” web page (think containing div
element = balloon skin, content = air). When you absolutely position those inner elements, the
outer element won't stretch to fit. Phew, was that a whole load of hot air on our part or did that
expand your understanding of the issue?
So, it's one thing to understand the idea behind absolute positioning, but there are other
(usually better) ways of doing things. Let's show you one of them.
Using Floated Positioning
We're still looking at a fixed-width design, but this time we'll take the content and “float” it
over to the right of the page, and we'll take the navigation and float it to the left. If you are
familiar with some of the old-school methods of web page building and design, this strategy is
similar to applying the align="left/right" attribute to tables or images (you shouldn't use
that approach any longer, by the way, folks). When you use align="left/right" , content flows
around it, not under it, thus creating an L-shape.
The outer container is 770 pixels wide; we'll split the page so that the navigation takes up
200 pixels and the content has the remaining 570 pixels. Here's the CSS that achieves this lay-
out scheme (the relevant parts are highlighted in bold); the (X)HTML is identical to the first
fixed-width examples:
body {
margin:0;
padding:0;
text-align:center;
background: #f0f0f0 url(body-bg.gif) repeat-x top;
}
#wrapper {
text-align:left;
width:770px;
margin:10px auto 0 auto;
background:#dade75;
border:1px solid silver;
}
#header {
background: #272727 url(header-bg.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
}
#content-wrapper {
width:570px;