2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here /2016/modern-100-percent-height-css/

I few years ago, I wrote a post about forcing two divs to be equal height — quite a feat if you’ve ever tried! Since then, a great jQuery plugin has came out that makes equal div height pretty easy to accomplish.

Using the plugin jQuery.equalHeight, it is as simple as:

</p> <div id="container"> <div id="menu"></div> <div id="content"></div> <div> <p><script> $('.container').equalHeights(); </script><br /> 1 2 3 4 5 6 7 8 < / p > < div id = "container" > < div id = "menu" > < / div > < div id = "content" > < / div > < div > < p > <script> $ ( '.container' ) . equalHeights ( ) ; </script> < br / >

Try out a live demo.

Of course, you should make your decision to use this method carefully. It’s quick and easy, but if your aren’t using jQuery already, is it worth the load time for this fix? If you want to check out a non-jQuery solution, check out this vanilla JavaScript solution.

JS Bin