Column Height Fix with CSS

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:-

#content {
	overflow: hidden; /* height fit */

… and the magic on the column:-

	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!

About the Author
Column Height Fix with CSS Column Height Fix with CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.