I wanted to share some cunning CSS with you that is a great fix for getting equal height columns with just CSS (this is a case where jQuery just ins’t needed). This is great for instances where you have a column down one side of the page that you want to have a consistent border on (say your left or right columns) and as it’s height isn’t 100% of the page the border cuts off and looks out of sync with the other column (that runs on further down the page).
Here’s how you fix the column to ensure it’s 100%:-
In your container div:-[css]
overflow: hidden; /* height fit */
… and the magic on the column:-[css]
padding-bottom: 1000px; /* height fit */
margin-bottom: -1000px; /* height fit */
And that’s all you need to get two columns which give the appearance of being a uniform/equal height at all times!