Automatic Rows & Columns with CSS

Question

I have ~170 small, square elements in a div, I'd like them to arrange themselves into however many rows they need to for the width of the div (which will change with the width of the browser).

<div id="container">
  <div class="sq"></div>
  <div class="sq"></div>
  <div class="sq"></div>
</div>

I know I could do:

#container .sq { float:right; }

with some padding to make them collect on the right and slowly overflow downwards - something like this:

. . . . . . .
. . . . . . .
. . . . . . .
      . . . .

where each dot is an sq element, but I really want something that overflows upwards, so they'd look like this:

      . . . .
. . . . . . .
. . . . . . .
. . . . . . .

or like this if the browser was resized:

    . . . . . . .
. . . . . . . . .
. . . . . . . . .

Does anyone have any idea if this is possible in CSS?

Answer 1

make two of them empty?

Answer 2

The difficulty in implementing that probably vastly outweighs the desire for the result. You may be able to achieve it using JavaScript/jQuery but I'm not sure if it's worth the effort?

Answer 3

Is this is what you need?

http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/

Answer 4

In IE8, you can say -ms-writing-mode: rl-bt. Although writing-mode is part of the CSS3 Text Layout work, this value is not included in the draft spec at this time.

On all other browsers you would need some script. For example if each .sq had float: right;, you could add clear: right to every nth element starting from the end of the list. (Where n is the number of squares that you calculate will fit the width.) Or simply float: left; and add a margin-left to the first sq to push it however far to the right it needs to be.