Three Equal Columns with Min-Max Wrapper

Left Column

This left column is getting it's background color from a repeat-y image that is set on the #wrapper div. It is not neccessary for the equal height columns rather it is just to show how to get different background colors for the side columns.

Just some filler text.

Just some filler text.

Just some filler text.

Just some filler text.

Expand Column

Right Column

Below is a simple Unordered List (UL) that has not been styled. It will get it's default styles applied from the browser at this point.

• List Item One
• List Item Two
• List Item Three
• List Item Four
• List Item Five
• List Item Six
• List Item Seven
• List Item Eight

Expand Column

Main Content

With this layout you do not need any repeating images to color the side columns. The side columns get their background color from the main #wrapper div. However, for demonstration purposes I am also using a repeat-y image on the #wrapper to give the left column a different background color. The right column will get the #wrapper's background color.

Here is the image that is being used:

The layout is set up with min-max widths on the #wrapper div to give it some flexibility but it can easily be set to a fixed width layout by removing those min-max properties. Just remember that IE6 does not support min-max properties so it would require an expression or javascript. Another way to cater to IE6 would be to just give it a defined width other than the percentage width that is used in this demo. That will keep it from getting to small at reduced viewport widths.

Expand Column