<alt>descriptive text goes here</alt>

Liquid Spaced Out Columns

In the previous Space Out Columns post I promised to follow up with some info on liquid layouts, so here we go:

The HTML

<div id="container">
    <div id="content">Content</div>
    <div id="rail">Rail<br />Content</div>
</div>

The CSS

body{
    margin:0;
    padding:5px 310px 5px 100px;
}
#container{
    float:left;
    width:100%;
    background-color:#ddd;
    border-right:210px solid #900;
    margin-right:-210px;
    display:inline; /* So IE plays nice */
}
#content{
    float:left;
    width:100%;
    border-right:10px solid #fff;
    margin-right:-10px;
    position:relative;
}
#rail{
    float:left;
    width:200px;
    border-left:10px solid #fff;
    margin-right:-210px;
    position:relative;
}

The markup stays the same as the fixed width version. The CSS becomes slightly more complicated, but it’s not that bad. The first thing to note is the CSS applied to the body. I set the left padding to the spacing between the browser edge and the layout, 100px. The right padding is set to the same, plus the width of the right rail, 200px, plus the width of the gap in between the columns, 10px, for a total of 310px.

For the container, the differences between this and the fixed width layout are minor. The width is set to 100% instead of a fixed width, and it has a right margin that is negative the width of the border. This is to prevent a horizontal scroll bar from appearing in IE. Then I add display:inline to fix the IE double margin bug.

The only remaining difference between this and the fixed width layout is the content area has its width set to 100% instead of a fixed width. The rail CSS is exactly the same.

See it in action here. The left rail version is here. You can view the source to see the differences. The important thing to note is the markup does not change between the left and right versions. Try doing that with a table.

I may have a way to make this work with three column layouts. I will post an update soon.

February 15th 2007

6 Responses to “Liquid Spaced Out Columns”

  1. On February 22nd, 2007 at 1:38 am, Johannes de Jong said:

    Hi Mr. Pearce,

    My site at time moment is pretty much optimized for a resolution of 1024 x768 I however would love to change it so that the “gap” between the map on the left and the “selection area” on the right stays constant when the visitor uses a higher res. As in your demo the Map and the “selection area” must grow.

    Can this be done or am I wasting my time?

    Thanks

    Johannes

  2. On February 28th, 2007 at 8:57 am, tom mcCain said:

    Alan,

    Thank you for the helpful tutorial using borders for columns. I am working with the code now and finding that Netscape (Mac 7.2, Win 7.2) and Mozilla (Mac 1.7.5, Win 1.7.12) are not displaying the footer correctly. When I check your multi-column example from the AListApart article, I see the same issue.

    Help?

    . . / tom mcCain

  3. On March 7th, 2007 at 6:26 pm, Bill Gray said:

    Mr Pearce.

    I am brand new to CSS but I like to read a lot before I delve in. I looked at your work on http://alistapart.com/d/multicolumnlayouts/3ColLiquidWithContent.html

    Absolutely excellent, rather than try something simple I tried to play with your code. Dreamweaver had all of the layouts all over the shop but microsoft expression web laid it out as you intended.

    I did a preview in FFox and IE 7. Firefox fine but IE7 gave a little glitch.

    Where Article 2 is the part with “This is too” the text gets mixed up with the text starting with “Ut wisi………” but upon hitting refresh its OK.

    You seem to me to be a perfectionist, so I felt I should share this with you.

    Many thanks

    Bill Gray

  4. On April 10th, 2007 at 10:38 am, nika said:

    Hi Mr Pearce,

    I read the AListApart article, and these design are great!!! I have a doubt, the “content” and “rail” divs adjust their height one with respect to another one, but if I want adjust “rail” div to height of “content” and if “rail” div is longer as “content” div appears a scroll in “rail” div, How should I do it?

  5. On January 22nd, 2008 at 4:52 pm, Bruce said:

    Thanks for this Alan; I was able to adapt your code to create a 3-column liquid layout for my site preferences panel. The “howto” with coding details is here.

    Cheers, Bruce

  6. On February 10th, 2008 at 3:44 pm, DENNY said:

    With the help of people such as your self, Mandarin Design, WC3 online tutorial, Stu Nichols and many others and beginning to grasp CSS and learn as I go…… it’s really a time thing…any programming is, and I am sure I have errors as well…but thank you for your time…any good suggestions/comments always appreciated, I so do enjoy all the HTML and CSS stuff….. only when time permits I am afraid.

Leave a Comment