Question

I’ve got two problems here: http://jsfiddle.net/BtGtT/3

The first problem is that the footer should always be at the bottom of page, so if I change my “otherContent” div to be 75px instead of 1500px, the footer should remain at the bottom of the page (and not in the middle when I change it back to 1500px). I’m not sure how to update my CSS to make that happen.

The second problem is that I need my “contentLeft” and “contentRight” divs to always be the same height as my “contentCenter” div. So when I update my “otherContent” div to be 75px or 1500px like in the JSFiddle, the “contentLeft” and “contentRight” divs should match that. Is this possible?

In my actual web page, I’ve got an <ASP:ContentPlaceHolder> control and the content within could be of varying height. I’d like to keep my side columns the same height as whatever the center content might be.

Answer 1

Sticky Footer and Faux Columns

More information:

Read this. CSS(2, at least) really struggles with this problem. So a few of your options are:

• Tiling an image with repeat-y to give the illusion of full length columns
  • Gradients also work if you can accept some graceful degradation
• Using Pseudo elements
• CSS3 Flexbox

All of these have their benefits, and differing browser support.

Just read this article.