CODEWITHSUNDEEP
htmlpage-flow
phazei
phazei

Reputation: 5437

html vertical wrapping page flow

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.

Upvotes: 0

Views: 167

Answers (1)

googabeast
googabeast

Reputation: 172

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; }

Upvotes: 0

Related Questions