Blogging and All that Malarkey Stuff & Nonsense

Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

Changingman layout

Changingman, a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license.

Many thanks for all the kind birthday wishes over the weekend, it's not everyday that you reach [...] ;). By way of a thank-you to all the kind people that I have met and others who occassionally stumble drunk across my site, here is a layout experiment which I have been devising with a little help from my good friend Brothercake, I call it the Changingman layout.

With the launch of something quite interesting only three weeks away, I have been working hard on a new design for the Karova web site. (I hang my head in shame that that site has not been developed for almost two years.) The new design has been through various iterations over the months and there is one layout which, although abandoned (as it does not fit the new content model) which I think deserves some further effort.

Changingman

Early on in the design, 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 and so not move with the scroll. Early experiments proved tricky to implement, even across modern browsers. Luckily, at the time I was working on a project with Brothercake, whose almost unlimited knowledge of browser behaviours and CSS filters came to the rescue.

So here is Changingman, a liquid three column CSS layout with a fixed centre column. (Caveat: Works in all modern browsers which we have tested, but not in version 5x Internet Explorer.)

Changingman, a liquid three column CSS layout with a fixed centre column

I'm releasing all my project XHTML and CSS files for Changingman under a Creative Commons Attribution 2.0 license for you to do with whatever you so choose.

It would be cool to hear what you think.

Replies

  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.

    https://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. L’pez 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
    https://www.dogtreatssogood.com/new/index.htm

    Having technical difficulties with the Order page
    https://www.dogtreatssogood.com/new/orders.htm
    https://www.dogtreatssogood.com/new/orders_old.html
    https://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.