CSS Layout - 3 Column Plus

[JazyLcan]

How can I do a three column layout that will maintain the same height across the page no matter what the height of either column.

Eg.

column 1 - column 2 - column 3

if column 1 is very long then column 2 & 3 should be equally long.

[ryanhellyer]

Hi.
There are a number of ways to do this. But the most common (and easiest) way is to use Faux columns. This involves using a block element (usually a DIV) with a background image which repeats the image to the bottom of the block. Then by adding floated columns with this DIV tag you can mimic the look of real columns even though the columns may not reach the bottom of the block.

Here's a demo of the sort of code you can use to achieve this:

<div style="margin:0 auto;width:800px;background:url('background.png') repeat-y;">
  <div style="float:left;width:200px;">
    Lorem Ipsum
  </div>
  <div style="float:left;width:400px;">
    Lorem Ipsum
  </div>
  <div style="float:left;width:200px;">
    Lorem Ipsum
  </div>
</div>