Multi-Column Layouts Climb Out of the Box

by Alan Pearce

140 Reader Comments

Back to the Article
  1. I’m doing a redesign for my site right now and I don’t see how this is a big deal.

    I had read this column before but did not have its exact coding in mind when I started filling out the style sheet for the page.  I ended up in more or less the same place.

    http://www.besalighting.com uses tables.  Do you know what that design has?  table-tr-td-td-td-table-tr-td-etc.  There are over 250 lines of code, including java, the page itself is 15k, and employs about 80 (EIGHTY!) images totaling an additional 100ish kb for buttons, mouseover effects, etc.  This code is copied on every page in order to provide a consistent look, and in fact it exposed a problem when the wrong lefthand menu appears on some of the pages.

    The work in progress is www.besalighting.com/newindex.shtml.  It employs less than 40 lines of code.  The style sheet is a whopping 2k.  It currently uses 4 images.  The left hand column is a fixed width, and the main body scales.  The footer is actually not below the main div, but at the bottom of the left hand column (using negative margin-top).  As far as I can tell, it works correctly in IE 6/7 and Firefox at any width 800 or greater, the footer always drops to the bottom, the dividing line always covers the intended area, I can change the text without affecting the layout, I can update the header , navigation bar and left-hand menu by manipulating the SSI pages and have them show up identical on every single page.  And everything so far comes back 100% validated.

    How are tables a better or more elegant solution?

    Copy & paste the code below to embed this comment.
  2. Wouldn’t it be just as easy using positioned graphics on the container div?

    Copy & paste the code below to embed this comment.
  3. Thank you! works great. I’m new to CSS, and already feel the relief.

    Copy & paste the code below to embed this comment.
  4. I’m trying this method with a fluid, two-column layout, and I’m running into some problems.

    The page is here: http://imp.purplelagoon.org/current/index.shtml
    CSS is here: http://imp.purplelagoon.org/css/imp.css
    CSS exceptions for IE6 are here: http://imp.purplelagoon.org/css/iestyle.css

    In Firefox, the contents of the rail (called #menu in my code) are not showing up.

    In IE7, the position of #content fluctuates as the width of the browser window is changed.

    In IE6, the contents of the rail aren’t showing up and the left edge of #content is cut off.

    Any ideas?

    Copy & paste the code below to embed this comment.
  5. Great article!

    Copy & paste the code below to embed this comment.
  6. I have a website that I developed in IE.  It looks fine in Safari and Firefox.  However the fonts, letters are looking a bit smeared.  Are there established stylesheets out there that can assist me.  I mainly am looking for font styles, etc. not layout.

    Copy & paste the code below to embed this comment.
  7. Unfortunately, this solution suffers what much of the web suffers from of late: fixed width websites. Alas. A List Apart suffers from this as well. “For People Who Make Websites”. Yes, but really for “People Who Make Fixed Width Websites”. It’s a regression in functionality. Oh well.

    Copy & paste the code below to embed this comment.
  8. I have approached the equal height columns from a different angle. By nesting the column divs they automatically take on the height of the tallest column. I have created some examples that have no CSS hacks and they work in all the common web browsers:

    Pixel widths:
    “3 column liquid layout – pixel widths”:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

    Em widths:
    “3 column liquid layout – em widths”:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm

    Percentage widths:
    “3 column liquid layout – percentage widths”:http://matthewjamestaylor.com/blog/perfect-3-column.htm

    Copy & paste the code below to embed this comment.
  9. Sorry to take part into discussion so late, but I found this layout and discussion recently. Thank you Matthew for very nice and useful solution. Why not to play with negative margin, it’s OK.

    I found a little IE6 bug when adding pictures or texts on the articlerail.

    The pictures escape often to the right over the rail border, when you rezise IE window. The highest picture does no escape, no matter the picture widht.
    Here is example before resizing: http://juhanile.fidisk.fi/3layout_wPictures_1.jpg
    … and here after resizing: http://juhanile.fidisk.fi/3layout_wPictures_2.jpg
    When I switch the pictures, always the first picture stays in the rail but the two last ones escape to the right.

    Of course, all other browsers behave nicely.
    Here is css for the pictures on the article rail:
    #raide img {
    margin-left:2px;
    margin-top:2px;
    display: inline; 
    overflow: hidden;
    }
    Also I have added to the #center this line:
    overflow: hidden;

    Is this article rail useless on IE6?

    Copy & paste the code below to embed this comment.
  10. I worked with it for a while but gave up.  Thank you, thank you, Matthew Taylor for posting the links to your samples. You have just the solution I have been looking for.  Just plain common sense and CSS without any buggy hacks.

    Copy & paste the code below to embed this comment.
  11. In working my way through the code in the “Three-column liquid layouts” section, I can’t figure out what this rule is supposed to do, unless it’s to accommodate a particular browser:

    #container{
      margin-right:-200px;
    }

    The layout doesn’t seem to change (at least visibly) if it’s taken out.

    And the site I’m working on will need borders around the sidebars, can y’all recommend a solid “holy grail” alternative?

    Copy & paste the code below to embed this comment.
  12. The preview looked fine I swear! Here’s another try with code tagging:

    Here’s an alternative way to use negative margins to get a three-column layout. I’ve used the example HTML from this article, but note the CSS methods used for layout are quite different, using padding on an “inner wrapper” div within the center rather than borders.

    Three questions:

    Do you see a problem with using this method as the basis for a fully fleshed out three-column layout?

    Have you seen it used as such before, and if so, can you point to further examples or information on the technique? (side note, if not, I christen it the “Kapok” method since it uses padding <g>

      and

    Can you point to “tried and true” three-column layout techniques robust enough for a CMS-driven site where users are contributing unpredictable content that may disrupt a fragile layout?


    I’ve set the code up in three stages like a howto, so that newbies can easily see the logic behind it.

    Stage 1:

    <br /> &lt;!DOCTYPE html PUBLIC &#8220;-//W3C//DTD XHTML 1.0 Transitional//EN&#8221;<br /> &#8220;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8221;&gt;<br /> &lt;html&gt;<br /> &lt;head&gt;<br /> &lt;title&gt;3 columns, liquid center&lt;/title&gt;<br /> &lt;style type=&#8220;text/css&#8221;&gt;<br /> body{<br /> margin:0;<br /> padding:0;<br /> }<br /> #container{<br /> background-color:#0ff;<br /> float:left;<br /> width:100%;<br /> display:inline; /* So IE plays nice */<br /> }<br /> #leftRail{<br /> background-color:gray;<br /> float:left;<br /> width:150px;<br /> position:relative;<br /> &nbsp; height:300px;<br /> }<br /> #center{<br /> background-color:yellow;<br /> float:left;<br /> width:100%;<br /> &nbsp; height:300px;<br /> }<br /> #rightRail{<br /> background-color:green;<br /> float:right;<br /> width:200px;<br /> position:relative;<br /> &nbsp; height:300px;<br /> }<br /> &lt;/style&gt;<br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> &lt;div id=&#8220;container&#8221;&gt;<br /> &lt;div id=&#8220;center&#8221;&gt;<br /> &nbsp; &lt;div id=&#8220;articles&#8221;&gt;Center Column Content&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div id=&#8220;leftRail&#8221;&gt;Left<br /> Rail&lt;/div&gt;<br /> &lt;div id=&#8220;rightRail&#8221;&gt;Right Rail&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/body&gt;<br /> &lt;/html&gt;<br />

    Stage 2:

    add:

    <br /> #articles{<br /> &nbsp; padding:0 200px 0 150px;<br /> }<br />


    Stage 3:

    add:

    <br /> &nbsp; margin-right:-100%;<br />

    to the ruleset for the #center div


    Here’s my explanation for how the negative margin works, please let me know if I’m off base:

    By setting a negative margin equal to the width, the float rules act as if this div has no width at all, allowing the following floated boxes to overlap it.


    Thanks for your time and attention, and hope someone finds this helpful, or at least interesting. . .

    Copy & paste the code below to embed this comment.
  13. first, thanks to help me climb out oft the box
    ————————————————————————
    i try to use it in asp.net
    in file MasterPage.master
    it can’t work
    it can’t display like you in design page but
    it cant preview in ie 7.0+ only

    help me pls.

    Copy & paste the code below to embed this comment.
  14. The solution is the multiple column proportional synchronized scrolling layout!
    The SLIRK Layout.

    Copy & paste the code below to embed this comment.
  15. great article indeed!
    I tested it with some odl browsers and yeah – it is not taht good but who cares? Just look at the recent stats of what users use and you’ll find that IE 6 is the oldest while IE 7 and FF are two equal leaders.

    Copy & paste the code below to embed this comment.
  16. Brilliant!  I was trying to figure out how to do a three column, equal height layout just last night, and though I hacked out a decent idea, the one in this article is so much simpler.  Thanks!

    Copy & paste the code below to embed this comment.
  17. Working on a website for our local volunteer fire department, and just can’t seem to get the columns right. Site looks okay in IE7 with the use of a few
    ‘s, etc., but not okay in Firefox and Opera. And Safari is way off. All I know about using this type layout came from your website.

    Website url http://www.jwgmg.com/TSVFD/index1.html
    CSS url http://www.jwgmg.com/TSVFD/styles/style.css

    Copy & paste the code below to embed this comment.
  18. I have found this solution useful in getting my site done the way I want. Now, the only thing left is to figure out how to center the entire layout in the middle of the screen, versus having it align to the left edge of the screen.  Any thoughts?

    Copy & paste the code below to embed this comment.
  19. You can have a look as well at Flexi CSS Layouts – a Dreamweaver Extension that help you create Css layouts in Dreaweaver without coding.

    Copy & paste the code below to embed this comment.
  20. Thanks for the article! I was really floundering in a sea of div’s, floats, and classes. I incorporated your model and got the alignment I needed.

    Copy & paste the code below to embed this comment.