Can I flow divs down the page instead of across it?

Posted by Brabster on Stack Overflow See other posts from Stack Overflow or by Brabster
Published on 2010-03-17T18:59:28Z Indexed on 2010/03/17 19:01 UTC
Read the original article Hit count: 279

Filed under:
|

If I have a collection of div elements, I can use CSS to have them flow across the page and overflow onto the next line.

Here's a simple example:

<html>
  <head>
    <title>Flowing Divs</title>
    <style type="text/css">
      .flow {
        float: left;
        margin: 4em 8em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flow">Div 1</div>
      <div class="flow">Div 2</div>
      <div class="flow">Div 3</div>
      <div class="flow">Div 4</div>
      <div class="flow">Div 5</div>
      <div class="flow">Div 6</div>
      <div class="flow">Div 7</div>
      <div class="flow">Div 8</div>
    </div>
  </body>
</html>

Is it possible to have the divs flow down the page instead of across it, so that they would flow down columns not along lines, but still occupy the same space as they would if they flowed across?

So for the example above, if they flowed into two lines of four divs, could I get the first column to contain Div1 and Div2 instead of Div1 and Div5?

© Stack Overflow or respective owner

Related posts about css

Related posts about float