CODEWITHSUNDEEP
htmlmultiple-columns
Raphaël
Raphaël

Reputation: 1141

Troubles with three-columns html

I have a problem with a three columns display. I have white space between two columns. It's hard to explain with words, so here is a screen :

enter image description here

Each big category (excavators, loaders...) is an UL. Each in float:left I would like to remove the white space between Loaders and Motor grader or between Scraper and Telescopic forklift...

Here is the generated 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>

Here are the CSS applied :

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

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

Here is what I want :

enter image description here

Have a nice day

Upvotes: 1

Views: 92

Answers (1)

gaborsch
gaborsch

Reputation: 15758

Try to create 3 columns first, then put your divs into those columns. The column itself should be also a 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>

Upvotes: 1

Related Questions