проблема расположения двух столбцов css

Question

изображение макета CSS, который я хочу

Это схема, которую я хочу выполнить, вроде как, у меня проблемы с тем, что эти две колонки вместе, но первая длиннее второй, и помещаю их в белый блок.

так ..

div1: просто div с автоматической высотой и черным цветом bg
div2: то же самое, что и div1, но белый bg
div3 и div4 также являются divами с автоматической высотой, и серый bg в некоторой точке div 4 может быть длиннее div 3 или наоборот, эти столбцы могут увеличиваться по высоте, поэтому div1 и div2 должны растягиваться
div5-8 это просто картинки.

Я могу получить это расположение div, но они не останутся в белом div (когда я плаваю в левом div 3) они появляются так, как если бы div 3 был над белым и черным div, и если я увеличу его, он растянется больше чем div1 и 2

Или я также могу получить их все внутри белого div, но без плавающего левого div4, что не помогает = /

Я знаю, что должна быть какая-то проблема позиционирования, но я пробовал некоторые комбинации, и они не будут работать, на данный момент я не использую какую-либо относительную позицию или что-то еще.

помощь приветствуется.

Answer 1

Перейти для 960 Grid System .Вы сможете достичь макета выше за несколько минут, используя эту среду 960.

Answer 2

div3 и div4 должны быть float ed ...

div5 - нужно div8 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>

Вот в чем суть, вы заполняете все остальное ...