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

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