How To Do An Easy 3 Column Layout With Floats

Monday, March 31st, 2008

When I first started doing CSS-layouts (instead of table-based layouts), I found that a lot of the solutions offered on the web included hacks and tricks to satisfy all browsers. Since then, I’ve refined my own personal technique which works in all browsers and validates as both CSS and HTML.

My method uses floats. Although floats can sometimes get a little tricky, the markup I’ve refined is simple and you can even replicate such features as min-height (CSS attributes that are useful, but do not apply to all browsers). It also makes sure that we aren’t using a combination of padding/margin and width/height that causes discrepancies between Internet Explorer and Firefox. Let’s get this started.

Here are two examples: The first is an empty canvas for you to modify, the second has content and colors.

Blank Example
Finished Example

HTML

Our HTML is fairly simple. I created the margin10 class to create space between each of the sections, the other sections have been named intuitively. The wrapper serves as our general container for all our items. This is typically used to include a background.

Our break tag pushes down the bottom of our wrapper so that it encapsulates each of the float divs.

Please note that I did not include another margin10 item after our rightNav, having our floats width totals equal to that of the wrapper.

CSS

This could very well be the simplest CSS you’ve seen for a 3 column layout:

#wrapper {
margin:0 auto;
width:800px;
background-color:#dddddd;
}
.margin10 {
float:left;
width:10px;
}
#leftNav, #rightNav {
float:left;
width:200px;
}
#pageContent {
float:left;
width:360px;
}

As you can see, everything except our wrapper floats left and creates a grid for us to use. Changing the dimensions requires minor tweaks and this works in every browser.

If you’re looking to set a min-width to your wrapper, you can simply use the height attribute on the margin10 item. That way, the break in the wrapper will always be pushed down by the height of the margins.

All this may seem daunting so if you have any trouble, leave me a comment.

Hope that helps.