left sidebar

Nulla quis mi at erat rhoncus tempus. Proin augue diam, condimentum ac, imperdiet at, malesuada volutpat, risus. Etiam at nibh dapibus libero aliquam dapibus. Donec malesuada quam sagittis urna. Integer eu enim. Nam augue pede, ullamcorper in, sollicitudin et, pharetra ac, dui. In congue nisl eget est. Proin tincidunt varius ligula. Donec eu ligula sed ligula volutpat aliquam. Suspendisse mollis magna ac felis. Aenean eu nisl at pede posuere lacinia. Nunc sapien dolor, porttitor ut, tincidunt ac, euismod ac, mauris. Aliquam ultrices. Vestibulum accumsan neque vel libero. Praesent a nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

right sidebar

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ante dui, molestie a, porttitor id, consectetuer sed, nisi. Fusce rhoncus enim et risus. In dapibus semper odio. Sed in mi. Curabitur fringilla augue a felis. Nam et elit. In a elit. Sed dictum. Duis dui ligula, feugiat ac, posuere non, aliquet quis, dui. Cras viverra pharetra nisi. Maecenas elit dolor, euismod non, commodo sed, dignissim et, mi.

center column

Testing an “unbreakable” center-column in an otherwise pretty ordinary 3-column. Text-width is limited to 600px in this demo, while the width of this column is unlimited. Thus if one can't get around without threatening to use <table> for this sort of thing, then this non-table version might be something to consider.

This demo will also cope with “any column longest” by the way, but that's unintentional.

tested browsers so far...

wide content a: 500px wide.

notes...

I'm using 'display: table-cell' to achieve the auto-expansion and shrink-wrapping effect in the good browsers. That leaves out some older browser-versions.

IE/win (all versions - including IE7) doesn't understand any CSS-table display properties and doesn't behave well without a number of hacks, so I'm instead using its quirks mode rendering as a workaround since that mode gives me auto-expansion by default.

wide content b: 50em wide.

Pellentesque mauris. Maecenas nec pede ut dolor imperdiet egestas. Integer neque nulla, dignissim et, iaculis id, adipiscing et, pede. Vivamus eleifend molestie odio. Vivamus lectus tortor, volutpat ac, adipiscing eu, posuere quis, lacus. Sed pretium diam et nulla. Vestibulum venenatis, massa ac ullamcorper rhoncus, dolor ante sagittis elit, sed gravida odio est vel ipsum. Aenean non libero. Quisque urna. Vivamus tincidunt tempor turpis. Donec sit amet lacus. Maecenas fermentum, velit aliquam imperdiet facilisis, magna felis ornare erat, a volutpat ipsum libero non est. Pellentesque tempus, urna non sodales ornare, velit neque rhoncus mi, at vulputate quam erat at erat. Suspendisse lectus enim, ornare eget, luctus a, ultrices vestibulum, est. Cras accumsan suscipit nisi. Morbi eget nunc. Maecenas semper, mauris in eleifend fermentum, lacus orci adipiscing neque, sit amet tempor velit nisi vel mauris. Donec quis nisl. Vivamus bibendum purus a libero gravida imperdiet. Suspendisse viverra dolor ut arcu.

wide content c: 300px wide.

Author: Georg Sørtun
www.gunlaug.no

first launched: 19. Apr. 2006
last updated: 19. Feb. 2007