Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

3 column CSS layouts: Easier than you might think

In a recent issue of the Sitepoint Tech Times newsletter, Kevin Yank explains (in detail, with pictures) the recurring problem in CSS of trying to create a three column layout with columns of equal height and a footer spanning all three. If you don’t yet understand the problem, you will once you’ve read his article. Kevin suggests a javascript fix for the problem, but fails to mention that by using floats instead of absolutely positioned divs for the side columns a three column layout with a full width footer can be achieved without resorting to javascript. Pixy’s 3 columns, no hacks demonstrates this technique in action. In addition, the CSS-Discuss Wiki has a comprehensive list of 3 column layouts that demonstrate a number of other techniques for solving the same problem.

Posted 18th August 2003 at 11:44 pm

This is 3 column CSS layouts: Easier than you might think by Simon Willison, posted on 18th August 2003.

View blog reactions

Next: Firebird sidebars coming soon

Previous: Atom API

4 comments

  1. Hmmm.... Too bad Pixy's 3 column layout suffers fromthe 3px IE Render bug. Anyone have a fix for it?

    Nathaniel - 19th August 2003 17:13 - #

  2. I read somewhere that the use of float (ie: float: right) to create CSS columns is not mature yet, and the only stable way to do so across browsers at present is still by using absolute positioning. Any truth to this? I think I read it at the Wired.com redesign feature, or perhaps it was ESPN.

    georgec - 19th August 2003 22:35 - #

    1. I'd contest that page doesn't use any hacks. It has an empty element with a non-breaking space simply to clear floats. That is sort-of a hack.
    2. That IE rendering bug can be fixed, yes. Often setting height on the main text element to 100% fixes it without any side-effects.
    3. Floats are mature, work better than absolute positioning, and work very well across all modern CSS-capable browsers. All of my layouts use them. The only downside is that you can't always do things like place navigation after content in the source HTML, but that isn't a huge problem.

    Tom Gilder - 20th August 2003 15:02 - #

  4. The 3px IE bug is so often a deal-breaker...I find myself using Mark Newhouse's 3 column layout quite a bit, which (a) splits the difference between float and positioning methods and (b) actually lays out correctly in Netscape 4. (not always necessary, but a nice bonus)

    It works best if you know that one column is always going to be shorter than the content...although I've been known to force the length of the middle column if just one page doesn't work right.

    Elaine Nelson - 20th August 2003 20:27 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/08/18/easier3ColumnLayouts

A django site