Force row of div into vertical columns

Question

I have a set of elements inside a container with menu items arranged alphabetically. I have set width of each element and floated them left, thus creating columns. My problem is that the alphabetically order then is set horizontal.

Can I break the row of divs in vertical columns somehow? It's bout 150 elements, and I want 25 in each so six columns.

My html:

<div class="treemenu">  
  <div class="clip"></div>
  <div class="clip"></div> 
  <div class="clip"></div> 
  <div class="clip"></div> 
  <div class="clip"></div> 
</div> 

Jquery or css would be prefered solution.

Answer 1

.clip {
    font: bold 12px/14px Verdana;
    padding: 5px;
    background-color: #EFEFEF;
    margin: 0 2px 2px 0;
}
.column {
    float: left;
}
.clearfix {
    clear: both;
}

<div class="treemenu">
    <div class="column">
        <div class="clip">accumsan</div>
        <div class="clip">accusam</div>
        <div class="clip">accusam</div>
        <div class="clip">aliquyam</div>
        <div class="clip">aliquyam</div>
        <div class="clip">aliquyam</div>
        <div class="clip">amet</div>
        <div class="clip">amet</div>
        <div class="clip">amet</div>
        <div class="clip">amet</div>
        <div class="clip">at</div>
        <div class="clip">augue</div>
        <div class="clip">autem</div>
        <div class="clip">blandit</div>
        <div class="clip">clita</div>
        <div class="clip">clita</div>
        <div class="clip">clita</div>
        <div class="clip">consequat</div>
        <div class="clip">consetetur</div>
        <div class="clip">consetetur</div>
        <div class="clip">consetetur</div>
        <div class="clip">delenit</div>
        <div class="clip">diam</div>
        <div class="clip">diam</div>
        <div class="clip">diam</div>
    </div>
    
    <div class="column">
        <div class="clip">diam</div>
        <div class="clip">diam</div>
        <div class="clip">diam</div>
        <div class="clip">dignissim</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolore</div>
        <div class="clip">dolore</div>
        <div class="clip">dolore</div>
        <div class="clip">dolore</div>
        <div class="clip">dolore</div>
        <div class="clip">dolores</div>
        <div class="clip">dolores</div>
        <div class="clip">dolores</div>
        <div class="clip">duis</div>
        <div class="clip">duo</div>
        <div class="clip">duo</div>
        <div class="clip">duo</div>
        <div class="clip">ea</div>
    </div>

    <div class="column">
        <div class="clip">ea</div>
        <div class="clip">ea</div>
        <div class="clip">eirmod</div>
        <div class="clip">eirmod</div>
        <div class="clip">elitr</div>
        <div class="clip">elitr</div>
        <div class="clip">elitr</div>
        <div class="clip">eos</div>
        <div class="clip">eos</div>
        <div class="clip">eos</div>
        <div class="clip">erat</div>
        <div class="clip">erat</div>
        <div class="clip">eros</div>
        <div class="clip">esse</div>
        <div class="clip">est</div>
        <div class="clip">est</div>
        <div class="clip">est</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">eu</div>
        <div class="clip">eum</div>
    </div>

    <div class="column">
        <div class="clip">facilisi</div>
        <div class="clip">facilisis</div>
        <div class="clip">feugait</div>
        <div class="clip">feugiat</div>
        <div class="clip">gubergren</div>
        <div class="clip">gubergren</div>
        <div class="clip">gubergren</div>
        <div class="clip">hendrerit</div>
        <div class="clip">illum</div>
        <div class="clip">in</div>
        <div class="clip">in</div>
        <div class="clip">invidunt</div>
        <div class="clip">invidunt</div>
        <div class="clip">invidunt</div>
        <div class="clip">ipsum</div>
        <div class="clip">ipsum</div>
        <div class="clip">ipsum</div>
        <div class="clip">iriure</div>
        <div class="clip">iusto</div>
        <div class="clip">justo</div>
        <div class="clip">kasd</div>
        <div class="clip">kasd</div>
        <div class="clip">kasd</div>
        <div class="clip">kasd</div>
        <div class="clip">kasd</div>
    </div>

    <div class="column">
        <div class="clip">labore</div>
        <div class="clip">labore</div>
        <div class="clip">labore</div>
        <div class="clip">luptatum</div>
        <div class="clip">magna</div>
        <div class="clip">magna</div>
        <div class="clip">magna</div>
        <div class="clip">molestie</div>
        <div class="clip">no</div>
        <div class="clip">no</div>
        <div class="clip">no</div>
        <div class="clip">nonumy</div>
        <div class="clip">nonumy</div>
        <div class="clip">nonumy</div>
        <div class="clip">nonumy</div>
        <div class="clip">nonumy</div>
        <div class="clip">nulla</div>
        <div class="clip">nulla</div>
        <div class="clip">odio</div>
        <div class="clip">praesent</div>
        <div class="clip">qui</div>
        <div class="clip">rebum</div>
        <div class="clip">rebum</div>
        <div class="clip">rebum</div>
        <div class="clip">sadipscing</div>
    </div>

    <div class="column">
        <div class="clip">sanctus</div>
        <div class="clip">sea</div>
        <div class="clip">sea</div>
        <div class="clip">sea</div>
        <div class="clip">sea</div>
        <div class="clip">sed</div>
        <div class="clip">sit</div>
        <div class="clip">sit</div>
        <div class="clip">sit</div>
        <div class="clip">sit</div>
        <div class="clip">takimata</div>
        <div class="clip">te</div>
        <div class="clip">tempor</div>
        <div class="clip">tempor</div>
        <div class="clip">tempor</div>
        <div class="clip">ut</div>
        <div class="clip">ut</div>
        <div class="clip">ut</div>
        <div class="clip">vel</div>
        <div class="clip">vel</div>
        <div class="clip">velit</div>
        <div class="clip">vero</div>
        <div class="clip">voluptua</div>
        <div class="clip">vulputate</div>
        <div class="clip">zzril</div>
    </div>

    <div class="clearfix"></div>
</div>

i kind of broke the given constraints in that i added markup, but it is a solution ;-)

Terry's looks better, though.

Answer 2

It seems like you want a list to be extended vertically, but allow to be split into several vertical columns.You would be looking at the new CSS columns specifications. However, complete cross-browser support remains poor (many browsers only partially so), even when using prefixed properties.

.treemenu {
  background-color: #eee;
  
  /* Let's say we want 4 columns */
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  
  /* Make sure we balance out the filling */
  -webkit-column-fill: balance; /* Not yet supported */
  -moz-column-fill: balance;
  column-fill: balance;
}
.treemenu > .clip {
  border: 1px solid #333;
  padding: 1em;
  
  /* Prevent breaking within the column element */
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}

<div class="treemenu">
  <div class="clip">a</div>
  <div class="clip">b</div>
  <div class="clip">c</div>
  <div class="clip">d</div>
  <div class="clip">e</div>
  <div class="clip">f</div>
  <div class="clip">g</div>
  <div class="clip">h</div>
  <div class="clip">i</div>
  <div class="clip">j</div>
  <div class="clip">k</div>
  <div class="clip">l</div>
  <div class="clip">m</div>
</div>

Besides providing a more detailed documentation of the property, Chris Coyier has also done an excellent article on how to make them responsive, too.