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

I've written the following HTML:

<开发者_如何学JAVA;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?

There's a solid option detailed here.

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:

• http://www.alistapart.com/articles/multicolumnlayouts/
• http://www.nicklewis.org/drupal-hackers-cookbook/one-multi-column-css-layout-technique-rule-them-all
• http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

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>