Blog

Changingman layout (updated)

  • Words: Andy Clarke

Changingman, a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license. (This entry was originally posted on 23rd November 2005 and has been updated in 2009.)

Exactly four years ago, I wrote about an unusual three column CSS layout that I had been working on. Why am I republishing this article now, four years after I originally wrote it? One reason is that this article is still widely linked to and is one of the most read pages on this site. Another is that I wanted to update the example file as the original version featured branding from a company I sold in 2006. I have also taken this opportunity to explain how the layout was achieved, something I didn't do in 2005.

In 2005, I had been working hard on a new design. Early on, the need arose for a liquid three column layout which featured two flexible outer columns and a fixed width centre column, not a layout commonly seen implemented with CSS. I also wanted the centre column to be fixed in the browser window. Early experiments proved tricky to implement.

First the bare-bones HTML elements.

<div id="content">
<div id="nav"></div>
<div id="content-main"></div>
<div id="content-sub"></div>
</div>
<p id="footer"></p>

The content area fills the full width, with a little left/right whitespace. 80px bottom padding allows room to repeat the ska-squares background image.

#content {
position : relative;
width : 96%;
margin : 0 2%; 
padding-bottom : 80px;
background : transparent url(content.png) repeat-x 0 100%; }

#content:after { 
content : "\0020"; 
display : block; 
height : 0; 
clear : both; 
visibility : hidden; 
overflow : hidden; }

This layout is designed to work down to a 1024px width and uses a tricky mix of percentage and pixel widths. First, float the left column. It has a 34% width plus 200px right padding. Why 200px? Coincidentally that will be the width of the fixed centre column. More on that in a moment.

#content-main { 
float : left;
width : 34%; 
padding : 60px 200px 0 0; }


Floating the left column

Next, place the right column. Almost a mirror of the left column, with a little negative left margin to pull the column into position. Once again the 200px left padding creates space for the fixed centre column.

#content-sub { 
float : left;
width : 34%; 
margin : 0 0 0 -200px; 
padding : 60px 0 0 200px; }


Right column (with negative margin)

Now absolutely position the fixed, 200px wide, centre column.

#nav { 
position : fixed; 
top : 40px; 
left : 34.6%; 
width : 200px; }


Positioning the centre column and completing the layout.

So here is Changingman (updated), released under a Creative Commons Attribution 2.5 license for you to do with whatever you so choose.

Original comments

  1. #1 On November 23, 2005 02:26 PM steve said:

    Hey youngster,
    Looks great on IE 6.0 on a PC, as I was reading, I dind't expect the center column to STAY PUT, I only expected it to not expand / contract in width. Very cool feature for keeping it in a fixed location.
    Happy belated.
    Steve

  2. #2 On November 23, 2005 02:33 PM David said:

    Happy Birthday ... and a very nice gift to us all, thank you. Perhaps for Christmas you could buy us a new toaster?

  3. #3 On November 23, 2005 02:41 PM Jennifer said:

    Its cool, the background doesn't show up in IE though, and in FF the background breaks apart at the right side of the center column when you scroll up and down.

    Other than that, it is super cool I love the fixed column in the center

  4. #4 On November 23, 2005 02:54 PM Tom said:

    It's cool but I think that girl is following me ...

  5. #5 On November 23, 2005 03:07 PM Alex Giron said:

    Funny the guys over at WebGraphics came up with something very similar.

    http://web-graphics.com/mtarchive/001668.php

  6. #6 On November 23, 2005 03:49 PM Richard@Home said:

    I'm actually more impressed that the right hand column jumps under the left hand column when the screen width becomes too small unable to display 3 columns side by side.

    Was this intentional or just a happy byproduct?

  7. #7 On November 23, 2005 03:56 PM Jay Jones said:

    For some added, "Huh?!", try using the scroll wheel in IE instead of just grabbing the scrollbar on the side. It begins to scroll beyond the calculated height for a trippy, "whoops, shouldn't do that!" effect.

    Looking good, though. I'd like to see it cross-browser compatible.

  8. #8 On November 23, 2005 04:25 PM Andy Saxton said:

    V.Nice. Looking forward to see what you do with the new Karova store.

  9. #9 On November 23, 2005 04:33 PM Heiko said:

    Very liquid layout and cool stuff, its still working on 800x600px and lokks good. The missing IE ( 5.0-5.5 ) support is nothing new, but the fixed position of the girl is really nice ,o)

  10. #10 On November 23, 2005 05:29 PM Alex said:

    V.nice effect and many happy returns

  11. #11 On November 23, 2005 05:32 PM Marco said:

    Hey Andy. Birthday greetings from across the pond :)

    This is one tricky layout you and James have worked on. Very cool. I'm bound by IE here at work, so I'll have to wait until I get home to fully appreciate the complexity of this layout.

    I'm sure Stu Nicholls will be pleased with this ;)

  12. #12 On November 23, 2005 06:13 PM Andrea said:

    Awww, I have been waiting for this to come out so I could act all cool about the sneak peek I had.

    Happy Birthday!

  13. #13 On November 23, 2005 08:09 PM Jordan Arentsen said:

    What sort of rounded edges technique did you use in the example?

  14. #14 On November 24, 2005 09:23 AM Gian Carlo Mingati said:

    happy b.day!
    And thanks. Intersting technique, i only wonder why you did not use a gif instead of a png. Even the poor exploder may have loaded something in the bg. Is it intentional? Oh yes i read the statements for body.... but why?
    Congrats for your 'skillz'!!

    Gian Carlo, Rome

  15. #15 On November 24, 2005 10:11 AM Reuben Whitehouse said:

    Hippo Birdie Andy :o)

  16. #16 On November 24, 2005 01:18 PM Robert Wellock said:

    I guess: 00110100 00110010

  17. #17 On November 24, 2005 04:04 PM Gordon Mackay said:

    Happy B-day, Andy :D

    Your site has been a great asset in bringing me back up to speed on a hobby that I have left behind for a while :)

  18. #18 On November 24, 2005 05:42 PM Vlad Babii said:

    Nice work. I will take a good hard look at it and hope to understand the logic behind it.

    Keep up the good work.

  19. #19 On November 25, 2005 03:01 PM Juan M. Lopez said:

    Happy birthday and thanks for the layout. It's a real nice job.
    Its the first time that i see a person who make the present to his friends in his own birthday and not in contrary.
    Excuses for my poor english, i hope you understand what i try to say... :)

  20. #20 On November 26, 2005 10:17 PM Patrick Mullin said:

    Very interesting concept. Looks great!

    Not having studied the CSS much, would it be easy to set either the left or right columns as fixed (as opposed to the center)?

  21. #21 On November 28, 2005 08:52 AM Corey said:

    In response to Patrick Mullin:

    I recommend having a quick glance at the main css. It isn't much code really, and the single column being fixed was done really easily, and you could change it to any of the 3 in a jiffy.

  22. #22 On November 28, 2005 12:10 PM Jill Lenz said:

    Happy Belated BD and thanks for the files

    This is what I did my Thanksgiving vacation
    http://www.dogtreatssogood.com/new/index.htm

    Having technical difficulties with the Order page
    http://www.dogtreatssogood.com/new/orders.htm
    http://www.dogtreatssogood.com/new/orders_old.html
    http://www.dogtreatssogood.com/new/orders_old2.htm

    Thanks for the learning experience

  23. #23 On November 28, 2005 06:36 PM Malarkey said:

    (Ed says: Mmmm, I wish I was a dog ;) )

  24. #24 On November 29, 2005 01:54 PM pixeldiva said:

    Woo.

    Liquid 3 column layouts with flexible right and left columns and fixed position centre column rock. :)

  25. #25 On November 30, 2005 08:51 PM Nick said:

    A great looking, cool layout. And nice you make the commented code available.

    However there are couple of things in the changingman.css file I don't follow. Could you explain the styles used for the definition list(dl), I'm not sure why you use display: inline-table and what generating a dot does a couple rules down?

    Thanks.

  26. #26 On December 1, 2005 12:49 AM Malarkey said:

    @ Nick:

    div.keypoint dl { display : inline-table; }

    /* IE Mac, you can't see this ;) \*/
    * html div.keypoint dl { height : 1%; }
    div.keypoint dl { display : block; padding : 0;
    }
    /* IE Mac, you can open your eyes now. */

    div.keypoint dl:after {
    content : ".";
    display : block;
    height : 0;
    clear : both;
    visibility : hidden;
    }

    Was for clearing a floated <dl> in the keypoint div. You can find more about clearing floats without additional markup on Position Is Everything

    This is not directly related to the layout and can be safely ignored.

    Any more Changingman examples in the 'wild', please let me know.


Contact us

x

Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ

(Here’s a map showing how to find our studio.)