CODEWITHSUNDEEP
htmlcss
Vivian River
Vivian River

Reputation: 32410

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

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?

Upvotes: 3

Views: 2596

Answers (3)

Nick H
Nick H

Reputation: 433

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>

Upvotes: 0

Patrick Karcher
Patrick Karcher

Reputation: 23613

There's a solid option detailed here.

Upvotes: 2

whoughton
whoughton

Reputation: 1385

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:

Upvotes: 1

Related Questions