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! 🙂
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 =)
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! 🙂
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.
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 🙂
Jeroen,
Bedankt (thank you)!
I hope it will come in handy! 🙂