Achieving dynamic columns in CSS3

Question

I hope you can help! Here are the parameters:

• One parent container with dynamic width and height
• Variable number of children
• Parent's height is set with JS, dependent on the window size
• As parent's height collapses, its width must expand according to children
• Children must fill the container vertically first and horizontally second
• Children must be direct descendants of the parent—there can be no nesting boxes or additional structure for rows and columns
• Children have a uniform size
• Children must be relatively positioned and their position cannot be calculated in JS
• JS only allowed to set parent's height / width

HTML

<ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
</ol>

BOX MODEL

[-------------]
[-[1]-[4]-[7]-]
[-[2]-[5]-[8]-]
[-[3]-[6]-[9]-]
[-------------]

BOX MODEL AFTER HEIGHT SHRINKS

[---------------------]
[-[1]-[3]-[5]-[7]-[9]-]
[-[2]-[4]-[6]-[8]-----]
[---------------------]

Is this possible with CSS/CSS3 box models?

Thanks!!

Answer 1

multi-column is notoriously inconsistently implemented, although it sounds like the easiest and most standard way to implement that:

http://jsfiddle.net/383uF/1/

I should note that any strange discrepancies between implementations in your case can be very much mitigated since you can control the dimensions of the container, so you can round to the nearest x pixels or whatever, to make sure there is less jumpiness and rerendering.