Question

I have a simple two column layout with a footer at the bottom. When the content in the sidebar is taller than the content in the main column, everything looks great. But when the height of the main column is greater than the sidebar, I need the sidebar to grow to the same height as the main column and for the last <div> in the sidebar to be pinned to the very bottom.

Here’s my sample code:

http://jsfiddle.net/mqnML/1/

Answer 1

The sidebar will only be as high as its content. One way to fix circumvent that is to wrap both columns into another div. Because you float the columns, end with an element that has clear:both (I added that inline at the bottom). That way the wrapper will be as high as the highest div (in this case the left column). The pin-me-to-bottom div can then be positioned at the bottom of the wrapper, instead of inside the right column. Add position:relative; to the wrapper, so you can position:absolute; the pin-me-to-bottom div.

Result: http://jsfiddle.net/7Mrgu/