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! 
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/Reactions
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 =)
May 19th, 2005 at 9:34
Thank you!
I would also really like somtehing similar to a same-height-as functionality.
Using
line-heightandvertical-alignfor 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!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.
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!
May 19th, 2005 at 16:10
Brilliant! Another one to go into my bookmarks
May 19th, 2005 at 16:39
Jeroen,
Bedankt (thank you)!
I hope it will come in handy!
Write a comment
Twitter reactions