How to make sure two divs have the same height?

Question

Let's say I have 2 divs within a wrapper side by side.

<div id="wrapper">
    <div id="primary"></div>
    <div id="secondary"></div>
</div>

#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}

How can I make sure div secondary always has the same height as div primary

Answer 1

try using javascript taking the value of the primary div an assignment at the second div.

The other way is trying the use pixel px or em, this way you ensure always has the same height both

Answer 2

There's a pretty cool trick on how to do this.

jsFiddle Demo

First, you apply padding-bottom: 100%; to each side-by-side div.

Next, you apply margin-bottom: -100%; to each side-by-side div. Note the -

Finally, you add overflow:hidden; to the div they are inside.

Presto! True happiness is yours.

HTML:

<div id="wrapper">
    <div id="primary">Lorem ipsum dolor set amet. </div>
    <div id="secondary">En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. </div>
</div>

CSS:

#wrapper  {overflow:hidden;}
#primary  {width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}
#secondary{width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}

References:

http://www.ejeliot.com/blog/61