How do I keep two side-by-side divs the same height?

Question

I have two divs side by side. I\'d like the height of them to be the same, and stay the same if one of them resizes. I can\'t figure this one out though. Ideas?

To c

Answer 1

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.

Here a sample of implementation

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Here is the link

http://www.cssnewbie.com/equalheights-jquery-plugin/