Gab

October 17, 2004

CSS Layout: Part II

That Good Ol’ 2-Column Layout

Now that we have our entire page centered, we can move on to what goes inside the wrapper. This example will include a header on the top, content on the left, a small sidebar down the right side, and a footer along the bottom. The markup for this is as follows: 

<body>
<div id="wrapper">

<div id="header">
    <h1>Header</h1>
</div>

<div id="content">

    Content in here.

</div>

<div id="sidebar">
    Sidebar goodies in here.
</div>

<div id="footer">
    Footer goes down here.
</div>

</div>
</body>

Here is how it looks so far. A background color has been added for visual purposes.

In most common designs, the header often spans the entire width of the wrapper. Many times people use a banner image in place of any text that may be found in the header. The text is then hidden from sight by applying class="hide" to the tags inside the header. 

<div id="header">
    <h1 class="hide">Header</h1>
</div>

.hide {
    position: absolute;
    height: 0; width: 0;
    overflow: hidden;
}

#header {
    background: #ddd url("images/header.jpg");
    width: 750px;
    height: 100px;
}

We do not use a display: none to hide the text in the header because it will also hide it from text readers. If someone can not see the image used, then the user must still be able to read the alternate text.

This is what it looks like with an image as the header.

Floating

We must use at least one float to position the content to the left and the sidebar to the right. Most designers float the content to the left and let the sidebar “float around” the content block. To keep the sidebar from wrapping around the content, creating our two columns, we must push the sidebar’s margin in from the left.

We give the floated content block a width and push the sidebar to the left the same amount or greater. 

#content {
    margin: 0; padding: 20px;
    float: left;
    width: 400px;
}

#sidebar {
    margin: 0; padding: 20px;
    margin-left: 450px;
}

Now, our example after adding some filler text from lipsum.com.

If you have viewed this last example using IE5/Mac then you may have noticed the float doing its job. Eliminating any whitespace between the content’s closing </div> and the sidebar’s opening <div>, solves this problem. 

<div id="content">

    Content in here.

</div><div id="sidebar">
    Sidebar goodies in here.
</div>

Don’t Forget The Footer

If the content is longer than the sidebar, the footer will continue to “float around” the content. To remedy this behavior and have the footer lie under the content and sidebar columns, the footer must clear the float on the content block. 

#footer {
    margin: 0; padding: 20px;
    background-color: #ccc;
    clear: both;
}

And here is the final result.

Nesting Floats?

But what happens when you want to float and clear inside the content block? Because of the lack of solutions on the web, I don’t believe this is something many people have wanted to do. Yet on a few of my recent projects I have needed such a solution to this problem. Luckily I did come across a solution and would like to share it next time.

Posted in: