Search code examples
htmlcsslayoutsticky-footer

Columns reaching the same bottom, without the same top

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.

enter image description here

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.

Solution

  • 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.