Question

I am dealing with a design that is a bit of a challenge.

The site requires the use of a sticky footer and full, equal length columns. I have been cheating the other pages with a a background image, but I have a few troublesome pages which have a header in the left column.

The header has a gap beneath it revealing the background image, so my descending a background image is not viable.

Here is a JSfiddle with a lot of the essential mark up in place. I have included the sticky footer, and sectioned it in the CSS as it is essential that the solution works with the sticky footer.

Answer 1

You can use Display:table property for this. Write like this:

#columns{
    width:90%;
    display:table;
}
.column{
    border: 1px dotted blue;
    display:table-cell;
}

Check this http://jsfiddle.net/4rY8h/2/

But it’s not work in IE7 & below.