CODEWITHSUNDEEP
css
JP.
JP.

Reputation: 5594

Automatic Rows & Columns with CSS

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?

Upvotes: 0

Views: 707

Answers (3)

bobince
bobince

Reputation: 536379

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.

Upvotes: 0

janhartmann
janhartmann

Reputation: 15003

Is this is what you need?

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

Upvotes: 0

Steve
Steve

Reputation: 5853

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?

Upvotes: 2

Related Questions