Column #col3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus.

About this example

This layout example demonstrates the implementation of the "Liquid Faux Columns" technique. The background images for columns #col1 and #col2 (both have a fluid width of 25%) are set to #main and .page. Both containers contain wrap around the content columns and therefore you get the visual effect of equal height columns with flexible widths.

The trick is to use partially transparent background images that and use percentage values for positioning. A more complete explanation of this technique can be found in Dave Childs article "Faux Columns for Liquid Layouts".