CSS 2 column layout within left column of outer layout

Ok I have a site design that uses the standard 2 column layout. In the left column of the OUTER layout I want to place an inner 2 column layout. So basically a two column layout nested within a column of an outer 2 column layout.

Here is an example of my code that is not working. The example at the top just shows my outer 2 column layout that works fine. Below that is my nested 2 col开发者_开发知识库umn layout that is broken. What am I doing wrong?

jsFiddle Example

Here an image of basically what I want to do

You had a div with a clear:both on it that was causing the right outer to float after the inner divs. I removed that and added some jQuery to give the outer divs equal height, as you can see in this example.

If you want the outer divs to have equal height without any Javascript then you will probably need to make them table cells.