pornhub.com tube8.com youporn.com

A CSS solution to two equal-height columns in HTML

Posted at March 22, 2010

It seems to be a very tricky problem to make two columns with equal height in HTML using CSS. There are many articles on how to do it. Maybe the most reliable way is to use Javascript to force it at the browser side since all CSS solutions look like hacks. I also found a possible solution using CSS.

The problem is like this. It is very common to create a two-column layout in CSS. Most books only cover how to make it using float and margin. It is enough if the columns have no background color or border. However, if you need to put a background color or border for the shorter column, you may find that its height is not as the same as the longer one as shown below. By default, a block’s height is determined by its content.

You can see the effect here. The effect is different when the DOCTYPE is XHTML or HTML. The main CSS and HTML parts are like this.

<style type="text/css">
#container {
    width: 500px;
}
#left_col {
    float: left;
    background-color: #573333;
    width: 150px;
}
#right_col {
    width: 350px;
    background-color: #DDD;
    margin-left: 150px;
}
</style>

<body>
<div id="container">
    <div id="left_col">
        Left Column ...
    </div>
    <div id="right_col">
        Right Column ...
    </div>
</div>
</body>

The solution I found is to add “position: relative;” to the container and add “position: absolute; height: 100%;” to left_col.  Every single change counts. You must put all of them. Also, I removed “float:left” from left_col. But it is safe to keep it there. The new style is like this.

<style type="text/css">
#container {
    width: 500px;
    position: relative;
}
#left_col {
    background-color: #573333;
    width: 150px;
    position: absolute;
    height: 100%;
}
#right_col {
    width: 350px;
    background-color: #DDD;
    margin-left: 150px;
}
</style>

Then it will render the layout as follows. You can see the effect here.

Why? I don’t know.I found this trick from the CSS of Yahoo Search. Yahoo search results are in 2-column layout. I found this CSS trick  is at least one of many tricks they use to force the left column to be the equal height of the right column. However, I got a theory (actually a feeling) for it. I guess, by declaring left column as position:absolute, CSS rendering somehow delays the time point to determine its final layout until other components in the container are rendered. I put Javascript at a few breakpoints in HTML to print its height. I found it is 0 after its content is rendered. Then it increases while the right column is rendered. So does the container’s height.

Is this a hack? I found it works on all browsers and all operating systems I can find.

There is one problem with this solution. It only works when the left column is shorter than the right one. The left column will be as equal high as the right column anyway even if the right column is shorter.

programming

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

8 Responses to “A CSS solution to two equal-height columns in HTML”

Leave Comment

(required)

(required)