Back to main page

An alternative to faux columns

Here's another way to make equal-height columns. Absolutely positioned boxes are positioned behind the text. The background is applied to these, so you can use different images or color in each of the columns—no faux columns required. The width of the sidebar can be either liquid or fixed.

Of course IE has trouble with it, so I've had to create a separate set of styles (using conditional comments) in order to use expressions for some of the dimensions. ActiveX must be allowed for them to work correctly.


lefthand column
main column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed sed enim. Suspendisse eleifend tellus vitae tortor. Aliquam at nisl non velit malesuada facilisis. Nunc adipiscing lacinia nibh. Sed tincidunt tellus in lectus. Nunc mattis aliquam odio. Quisque scelerisque felis at purus. Phasellus vel nunc a eros tristique faucibus. In luctus eros vulputate sapien. Praesent auctor. Aliquam scelerisque erat in metus rutrum euismod. Nulla ut enim. Curabitur sit amet metus non eros molestie vulputate. Morbi dui velit, tempor et, rutrum sed, elementum quis, purus. Quisque a pede ac erat hendrerit venenatis. Nulla nibh urna, consectetuer eget, luctus non, accumsan eget, orci. In quis pede.

middle
lefthand column 2

Ut tincidunt, risus non adipiscing venenatis, libero massa mattis velit, a mattis justo velit mollis felis.

righthand column
main column 2

Nulla neque. Suspendisse ut magna. Nam felis nibh, consectetuer in, aliquet ac, venenatis quis, justo.