CSS Tip: How to match column heights in CSS

You’ve created a website design which looks great, until your content causes one column to extend longer than the other, causing the second column’s background to come short.

Of course you can fix these issues by having all your backgrounds in one graphic that sits behind your site, but you have issues with scalability and large graphic images. A better solution is possible; with a bit of understanding you’ll have this down in no time:

1
2
3
4
5
6
7
8
9
10

.LeftColumn,
.RightColumn{
    float: left;
    width: 200px;
    padding-bottom: 30000px;
    margin-bottom: -30000px;
}
.RightColumn{
    width: 400px;
}

Make sure your 2 columns are floated next to each other in a container. As you see in the above code, I’ve added 30,000px extra padding to the bottom of both columns to extend them for as much as we’ll need down the page. The negative margins will stop their Container from being pushed down in height.

The columns’ backgrounds will still show below the Container so the overflow hidden style on the container will fix this. As long as the Container does not have a fixed height set, it will not clip your content:

1
2
3
4
5

.Container{
width: 600px;
margin: 0 auto;
overflow: hidden;
}

Click here for a demo with source code

• ← Newer Posts
• Older Posts →