css two column layout problem

Question

image of css layout that i want

Thas is the layout that i want to accomplish, kind of, I am having troubles having thos two columns together but the first one longer than the second, and getting them inside the white div.

so..

div1: is just a div with auto height and black bg
div2: the same as div1 but white bg
div3 and div4 are divs with auto height too, and grey bg at some point div 4 could be longer than div 3 or the other way around, these columns can increse in height therefore div1 and div2 should stretch
div5-8 are just images.

I am able to get this positioning of the divs, but they wont stay into the white div (when i float left div 3) they show up like div 3 was on top of the white and black divs, and if i make it longer it stretches more than the div1 and 2

Or I can also get them all inside the white div, but without floating left div4 which doesnt help =/

I know has to be some positioning problem, but I've tried some combinations and they wont work, at this point I am not using any position relative or anything.

help is appreciated.

Answer 1

Check out YUI grids and the YUI grids builder.

This should give you a good foundation to build on.

Answer 2

div3 and div4 need to be floated...

div5 - div8 need clear:both;

    <style>
      div                          { overflow:hidden; }
      div.3, div.4                 { float:left; }
      div.5, div.6, div.7, div.8   { clear:both; }

    </style>
    <div class="1">
      <div class="2">
        <div class="3"></div>
        <div class="4"></div>
        <div class="5"></div>
        <div class="6"></div>
        <div class="7"></div>
        <div class="8"></div>
      </div>
    </div>

That is the jist of it, you fill in the rest...

Answer 3

go for 960 Grid System (www.960.gs), you should be able to achieve the mockup above within few minutes by using that 960 framework. give if a shot!