This is the left column. I have chosen to float this DIV to the left. Doing so, along with the way I have positioned the main content, allows me to have a footer.

View the CSS for this page.

Back to Real World Style...


This would be the main content area of the page. It has no positioning applied to it, rather it sets it's margins up according to the widths of the left and right columns. depending on what you want to accomplish design-wise, these three columns can be completely liquid, completely fixed (width) or a combination.

My design constraints are fairly straightforward. I want a header and a footer, in addition to the three columns. Since a large part of my audience uses NN4 on *nix boxen, I want something that will work on that browser. I also want to be able to use this basic template and apply it in a variety of ways, so the DIVs need to be set up so that they make sense if you put backgrounds on them and/or draw borders around them. This further allows for interactions such as this in more recent browsers.

Two excellent layouts have been created and brought to my attention in the last week or so. Both of them do a good job of creating a 3 column layout that works in NN4 and better browsers. Neither one meets all of the requirements I need. So I looked at them and set out to create my own version.

None of these comments are in any way meant to cast judgement on the other 3 column layouts. This is simply my humble attempt to create something that fits my needs.

Craig Saila's version does almost everything I need, except for the footer.

And Al Sparber's version, in many ways superior to mine, allows neither a footer, nor the ability to include a background color or border. I should point out that none of the columns overlap regardless of how you resize the browser window - a feat that neither Craig nor myself can lay claim to.

One side benefit of this version is that when browsing at about 800x600 IE5Mac does not have the horizontal scroll bar.

So, pick your poison...


This is the Right Column. It is positioned absolutely, from the left. As such, it can be placed anywhere in the flow of the HTML document. Due to the way Netscape calculates the width of the browser window, if you resize the browser to certain widths, this DIV will overlap with the center DIV. Resizing again, either wider or narrower usually takes care of the overlap.