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

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?