Проблемы с тремя столбцами html

Question

У меня проблема с отображением трех столбцов. У меня есть пробел между двумя столбцами. Это трудно объяснить словами, так вот экран:

Каждая большая категория (экскаваторы, погрузчики ...) является UL. Каждый в float:left Я хотел бы, чтобы удалить пустое пространство между Погрузчиками и Автогрейдерами или между скребком и телескопическим погрузчиком ...

Вот сгенерированным HTML

<div class="right_list"> 
       <ul class="group_list"> 
     <li><a class="titre_cat" href="xxx" title="Excavators">Excavators (588)</a></li> 

              <li><a class="sous_cat" href="xxx" title="Dragline Excavators ">Dragline Excavators (1)</a></li> 
           <li><a class="sous_cat" href="xxx" title="Track excavators ">Track excavators (239)</a></li> 
           <li><a class="sous_cat" href="xxx" title="Wheel excavator">Wheel excavator (111)</a></li> 
           <li><a class="sous_cat" href="xxx" title="Industrial excavators">Industrial excavators (3)</a></li> 
           <li><a class="sous_cat" href="xxx" title="Excavators accesories">Excavators accesories (13)</a></li> 
           <li><a class="sous_cat" href="xxx" title="Mini digger ">Mini digger (221)</a></li> 
           </ul> 
[... and more and more ...] 
</div> 

Вот CSS применяется:

.right_list { 
    float: left; 
    margin: 0 0 0 7px; 
    width: 756px; 
} 

.group_list { 
    float: left; 
    margin: 0 10px 5px 0; 
    width: 242px; 
} 

Вот что я хочу:

Хороший день

Answer 1

Сначала создайте 3 столбца, затем поместите свои divs в эти столбцы. Сама колонка должна быть также div.

<div class="col"> 
    <div class="right_list"></div> 
    <div class="right_list"></div> 
    <div class="right_list"></div> 
</div> 
<div class="col"> 
    <div class="right_list"></div> 
    <div class="right_list"></div> 
    <div class="right_list"></div> 
</div> 
<div class="col"> 
    <div class="right_list"></div> 
    <div class="right_list"></div> 
    <div class="right_list"></div> 
</div>