A picture of me taking it easy

I'm currently on parental leave till September. During that time, I will not read any e-mail or blog comments.

Until I'm back, please read through my archives, take a look at my code/applications and check out my pictures.

Have a great summer, and a splendid winter to you aussies and kiwis! :-)

The ultimate guide to CSS-based column layouts

Published on Thursday, May 19th, 2005

By popular request, I’ve set together a test page with many different ways of creating column layouts solely based on CSS. Go read it now! :-)

Posted in CSS, Developing | 6 comments

6 comments

  • Erik
    May 19th, 2005 at 9:17

    Go Robert, go Robert.. :)

    I really would like to have CSS features like “same-height-as: #divid” or something :)

    The tricky stuff with this from my 2 days experince as a div-column-ui-developer is to position things on the same “rows” and get them to stay there when the content is dynamic (e.g. the size varies from 10 chars to 250-400 chars). But there is always the nice table element, to save your day ;)

    Why can’t Web-UI development be as predictable as C# development =)

  • Robert Nyman - author
    May 19th, 2005 at 9:34

    Thank you! :-)

    I would also really like somtehing similar to a same-height-as functionality.

    Using line-height and vertical-align for the applicable elements usually does the trick, but you need to be experienced in CSS to handle all different kinds of situations. It’s no child’s play writing interface code! :-)

  • Box
    May 19th, 2005 at 9:48

    Nice one!

    Good to see some examples of the column heaven (or hell).

    I would like to see an example of the header, three col and footer layout, with the footer valign to the bottom of the page. There is so many solutions for this out there, but i would like to see your solution for it also.

  • Robert Nyman - author
    May 19th, 2005 at 10:07

    Thank you!

    That’s (pretty) easy. Just use position:fixed; bottom:0; for all standards-compliant web browsers, and the expression fix for Internet Explorer.

    However, then you’d probably want to set the height of the body and play around with that. And that’s all the information you’ll get now! :-)

  • Jeroen Mulder
    May 19th, 2005 at 16:10

    Brilliant! Another one to go into my bookmarks :)

  • Robert Nyman - author
    May 19th, 2005 at 16:39

    Jeroen,

    Bedankt (thank you)!
    I hope it will come in handy! :-)

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview

All the proceeds from ad clicks will go to charity. However, if you like to give something directly to charity yourself, I recommend choosing from the listed ones below.

  • Save the Children
  • Red Cross
  • Cancer Research UK
  • WWF

Top results