How to have two columns that are the same height in HTML?

Question

I've written the following HTML:

<div id='wrapper'>
    <div style='background-color:Red; float:left; width:50%'></div>
    <div style='background-color:Green; width:50%'></div>                  
</div>

This gives me a red column and a green column. The two columns will extend down the page as I add text. However, what I really would like is for both columns to be the exact same height regardless of how much or how little text is in each column.

How can I do this?

Do you mean you want to set them statically to both be, for example, 200px at all times regardless of content; or do you mean you want the height of both columns to always be equal. For example if Column A extends to 200px with content than Column B will adjust to that size even if it only has 10px of content. — Eli, Mar 24 '11 at 18:18
If the red column has 50 lines of text, I want column B to grow so that it is as tall as column A, even if it only have 10 lines of text. I know of no set upper limit, such as 200px — Vivian River, Mar 24 '11 at 18:21

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

There's a solid option detailed here.

edited May 23 '17 at 12:04

Community

1
1

answered Mar 24 '11 at 18:20

Patrick Karcher

22,995
5
52
66

score 1 · Answer 2 · answered Mar 24 '11 at 18:19

Your best bet is to use CSS3 Columns, but obviously that limits your scope of browser support. http://www.quirksmode.org/css/multicolumn.html

Past that you have a couple of options, first you can make them match via javascript (painful and annoying). Or there are a couple of CSS hacks using negative bottom margins that can make it work, but are somewhat flakey, iirc.

For reference on some of the negative-margin options:

score 0 · Answer 3 · answered Mar 24 '11 at 18:33

Here is a bit of hack since it uses an empty div to clear the float but this should have the effect you are looking for across all browsers without using any JavaScript.

Use the following CSS:

div.column {
   float:left;
   width:50%;
   height:500px;
   overflow:hidden;
}

div.column.first {
    background-color:red;
}

div.column.second {
    background-color:green;
}

div.clear {
    clear:both;
    height:0%;
    width:0%;
    line-height:0%;
}

And the following HTML:

<div id="wrapper">
    <div class="column first"></div>
    <div class="column second"></div>
    <div class="clear"></div>
</div>

How to have two columns that are the same height in HTML?

3 Answers3

Linked