How To Have Two Columns That Are The Same Height In Html?

I've written the following HTML:

here.

Solution 2:

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/

Solution 3:

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:

<divid="wrapper"><divclass="column first"></div><divclass="column second"></div><divclass="clear"></div></div>

Share