The ultimate guide to CSS-based column layouts

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! πŸ™‚

6 Comments

  • Erik says:

    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 says:

    Thank you! πŸ™‚

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

    Using <code>line-height</code> and <code>vertical-align</code> 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 says:

    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 says:

    Thank you!

    That's (pretty) easy. Just use <code>position:fixed; bottom:0;</code> 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! πŸ™‚

  • Brilliant! Another one to go into my bookmarks πŸ™‚

  • Robert Nyman says:

    Jeroen,

    Bedankt (thank you)!

    I hope it will come in handy! πŸ™‚

Leave a Reply to Robert Nyman Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.