Css: расположение Div (2 столбца нескольких делений (слева - справа) + центр деления)

Question

Я пытаюсь расположить сайт так:

-------------------
{   }{       }{   }
{   }{       }{   }
-----{       }-----
{   }{       }{   }
{   }{       }{   }
------------------- 

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

Левый и правый столбцы имеют класс leftcolumn и rightcolumn

Мой код: левый столбец:

div.aside.gauche div.section.colonne.categories {
    height:460px;
    width:210px;
    border-style:solid;
    margin-top:16px;
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
    float:left;
}

 div.aside.gauche div.section.colonne.commentaires {
    height:85px;
    width:210px;
    border-style:solid;
    margin-top:6px;
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
    float:left;
}

div.aside.gauche div.section.colonne.magasins {
    height:321px;
    width:210px;
    border-style:solid;
    margin-top:6px;
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
    float:left;
}

правая колонка:

div.aside.droite div.section.colonne.recherche {
    height:460px;
    width:170px;
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
    float:right;
}

div.aside.droite div.section.colonne.suivez {
    height:460px;
    width:170px;
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
    float:right;
}

div.aside.droite div.section.colonne.partenaires {
    height:460px;
    width:170px;
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
    float:right;
}

центральная часть

div.milieu {
    float:left;
    display:block;
}

Answer 1

Убедитесь, что все div столбца используют:

display:inline-block;

Answer 2

Если все ваши div'ы будут иметь определенную высоту и ширину, вы можете использовать position: absolute для всех ваших div'ов и точно указать, куда они идут.

 <div id='left_top'>
   ...
 </div>
 <div id='left_middle'>
   ...
 </div>
 <div id='left_bottom'>
   ...
 </div>
 <div id='center'>
   ...
 </div>
 <div id='right_top'>
   ...
 </div>
 <div id='right_middle'>
   ...
 </div>
 <div id='right_bottom'>
   ...
 </div>

Затем с вашим css как таковым:

div#left_top {
  position:absolute;
  top:0px;
  left:0px;
  width:210px;
  height:460px;
  background-color:red;
}

div#left_middle {
  position:absolute;
  top:460px;
  left:0px;
  width:210px;
  height:85px;
  background-color:yellow;
}

div#left_bottom {
  position:absolute;
  top:545px;
  left:0px;
  width:210px;
  height:321px;
  background-color:blue;
}

div#center {
  position:absolute;
  top:0px;
  left:210px;
  right:170px;
  background-color:cyan;
}

div#right_top {
  position:absolute;
  top:0px;
  right:0px;
  width:170px;
  height:460px;
  background-color:magenta;
}

div#right_middle {
  position:absolute;
  top:460px;
  right:0px;
  width:170px;
  height:460px;
  background-color:green;
}

div#right_bottom {
  position:absolute;
  top:920px;
  right:0px;
  width:170px;
  height:460px;
  background-color:purple;
}

Я указал цвет фона для каждого элемента, чтобы вы могли видеть, где они находятся, если вы хотите вырезать / вставить его для просмотра.Я использовал указанные вами размеры.Но вы можете легко адаптировать это для увеличения одного или нескольких элементов div, чтобы они все были одинакового размера или менялись в зависимости от размера экрана.

Answer 3

Вот решение вашего вопроса:

http://jsfiddle.net/uZx4L/3/