CSS/JavaScript Technique to dynamically force 2 divs to be the size of the larger div

Question

I have 2 divs, a main content section and a sidebar.

What I want to happen is force each div to be the same height as the tallest div

If the Sidebar Content is taller then the Main Content I want to push the Main Content down to match the Sidebar Content's height

+--------------------+----------+
|  Main Content      | Sidebar  |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|  END               |          |
| __________________ |          |
|                    |          |
|                    |          |
|                    |  END     |
|                    | ________ |
+--------------------+----------+

Conversely, if the Main Content is taller then the Sidebar Content I want to push the Sidebar Content down to match the Main Content's height

+--------------------+----------+
|  Main Content      | Sidebar  |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |  END     |
|                    | ________ |
|                    |          |
|                    |          |
|  END               |          |
| __________________ |          |
+--------------------+----------+

So it would look like this:

+--------------------+----------+
|  Main Content      | Sidebar  |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|   END              |  END     |
| __________________ | ________ |
+--------------------+----------+

Answer 1

Could you use jQuery or another framework to extrapolate the height of your tallest div and then set the height to the others accordingly?

if($('#mainContent').height() >= $('#subContent').height()) {
    $('#subContent').height($('#mainContent').height());
}
else
{
    $('#mainContent').height($('#subContent').height());
}

Answer 2

What you want is equal height columns, which can be accomplished with CSS only, without any javascript.

There are other ways to do this, including jQuery. See this stackoverflow question for more information.