0

Say I have a list of spans that's an alphabetical list. Normally with html, if I create a bunch of them, say display:inline-block, they'll show up like so:

  +------+------+------+
  |   a  |   b  |  c   |
  +------+------+------+
  |   d  |   e  |  f   |
  +------+      +------+
  |   g  |------+
  +------+

And will go as wide as the page will allow.

How can I instead have a fixed height, and have then stack down till it fills up, then go to the next column like so:

  +------+------+------+
  |   a  |   d  |   f  |
  +------+------+------+
  |   b  |   e  |   g  |
  +------+      +------+
  |   c  |------+
  +------+

Where each of those squares is a containing element.

It's a limited example, I don't want it to be 3 high in particular, I wan't it to fill whatever vertical space it's given, then go on to the next column.

phazei
  • 5,323
  • 5
  • 42
  • 46

1 Answers1

0

A very close posting found here Column layout in HTML(5)/CSS

The way I would do this would have to be add a counter somewhere into the loop that outputs the columns say something like (%3) and after every third close the column and clear the float. The structure would be something like the following....

<div class="myWrapper">

    <div class="col1">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div><!--col1-->
    <div class="clear"></div><!--clear-->

    <div class="col2">
        <div>d</div>
        <div>e</div>
        <div>f</div>
    </div><!--col2-->
    <div class="clear"></div><!--clear-->

    <div class="col3">
        <div>g</div>
        <div>h</div>
        <div>i</div>
    </div><!--col3-->
    <div class="clear"></div><!--clear-->

</div><!--myWrapper-->

.myWrapper{}
    .myWrapper > div{ float:left; width:30%; margin-right:1%; }
    .myWrapper > div:last-child{ margin-right:0; }
        .myWrapper div[class*='col'] > div{ max-height:200px; margin:10px 0; }
 .clear{ clear:both; }
Community
  • 1
  • 1
googabeast
  • 172
  • 9
  • This is a fixed flow. I need it so it's dynamic depending on space flowing into an unlimited number of columns. If someone resizes their browser, the columns would naturally fill up the remaining space. Naturally the columns flow left-to-right. I want to change the flow to top-to-bottom. Like if I rotated the outter box 90deg, then rotated the internal divs -90deg to compensate. But when doing that widths of stuff kind of gets funky. – phazei Oct 01 '13 at 20:07