Example Two Column Layout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet turpis ac felis. Sed nisl erat, gravida nec, ultricies non, dictum vitae, velit. Nam magna. Cras nonummy placerat ante. Duis odio. Nullam pretium tortor id ipsum. Nulla rhoncus dui eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus turpis ac augue sollicitudin vehicula. Integer tristique, turpis ac sodales aliquam, purus arcu rutrum sapien, ut pharetra ante odio at justo. Vivamus pulvinar wisi sit amet erat. Aliquam tincidunt. In non magna ac neque tincidunt auctor. Praesent non ipsum.

Aenean laoreet, tellus a pulvinar placerat, wisi leo dignissim elit, non convallis elit felis quis diam. Ut arcu tortor, consequat id, pharetra id, volutpat ac, urna. Phasellus egestas pede sed dolor. Donec eu tortor. Donec ac sapien vitae felis adipiscing laoreet. Phasellus at est eget lacus scelerisque congue. Donec neque massa, euismod ac, scelerisque ut, mattis nec, dui. Suspendisse semper, est eu vehicula bibendum, sapien est tincidunt justo, nec hendrerit justo leo nec orci. Nulla purus tellus, aliquam ac, bibendum eget, tincidunt sed, ligula. Donec ornare, ante non hendrerit euismod, est augue suscipit lectus, et interdum magna ipsum eget enim. Nunc quis pede id mi dignissim iaculis. Nunc quis sapien. Integer tempus. Integer sed mauris nec odio imperdiet sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse euismod varius arcu. Nunc varius sollicitudin elit.

Integer pede neque, aliquet luctus, mollis vel, vehicula vitae, diam. Sed volutpat venenatis libero. Phasellus lacinia. Donec commodo erat sit amet nunc. Nam consequat, dolor sed fermentum mattis, wisi arcu volutpat nibh, at luctus sem orci id justo. Etiam eros. In malesuada. In pulvinar. Nam pede erat, pharetra a, viverra eget, varius ac, nisl. Vivamus metus justo, faucibus id, ultricies ut, pellentesque quis, lacus. In sed enim. Praesent quis lacus eget nisl euismod porta. Sed consectetuer sodales enim. Donec sapien. Nunc gravida. Ut consectetuer augue eu urna. Morbi vitae dolor.

Aenean laoreet, tellus a pulvinar placerat, wisi leo dignissim elit, non convallis elit felis quis diam. Ut arcu tortor, consequat id, pharetra id, volutpat ac, urna. Phasellus egestas pede sed dolor. Donec eu tortor. Donec ac sapien vitae felis adipiscing laoreet. Phasellus at est eget lacus scelerisque congue. Donec neque massa, euismod ac, scelerisque ut, mattis nec, dui. Suspendisse semper, est eu vehicula bibendum, sapien est tincidunt justo, nec hendrerit justo leo nec orci. Nulla purus tellus, aliquam ac, bibendum eget, tincidunt sed, ligula. Donec ornare, ante non hendrerit euismod, est augue suscipit lectus, et interdum magna ipsum eget enim. Nunc quis pede id mi dignissim iaculis. Nunc quis sapien. Integer tempus. Integer sed mauris nec odio imperdiet sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse euismod varius arcu. Nunc varius sollicitudin elit.

Duis hendrerit tortor ac neque. Vestibulum et velit in velit porttitor dictum. Aenean tellus. Pellentesque sit amet est. Etiam nec enim. Aenean sapien. Curabitur ut magna nec nisl vehicula aliquam. Vestibulum luctus justo id risus. Donec suscipit. Nam nibh felis, tempor eu, ullamcorper vel, molestie sit amet, lacus. Nullam lobortis, velit id vestibulum blandit, ipsum urna tincidunt lectus, in blandit nunc elit id sapien. Donec consequat. Suspendisse lorem. Morbi porta, tellus consequat suscipit scelerisque, nisl justo scelerisque velit, sed adipiscing purus felis non magna. Suspendisse arcu ipsum, faucibus a, ornare sed, imperdiet in, nunc. Pellentesque elementum hendrerit augue.

This area would typically be used for navigation.

Technique

This is an example two column liquid layout entirely in CSS.

The main (white) column has width:67% and is floated to the left. Minor changes could swap the columns around without any changes to the actual HTML.

This column hasn't been positioned at all! This technique is outlined by Jeffery Zeldman in his article From Web Hacks To Web Standards: A Designer's Journey

Zeldman doesn't have a top or bottom panel on his site, but these can easily be acheived by clear:both to make sure they don't compete with the floating <div>.

It is also probably worth noting that the blue panel at the top isn't a <div> at all, but is an <h1> element with display:block set in CSS.

Valid HTML 4.01!

Valid CSS!

Copyright © 2003 Toby A Inkster.