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

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.