Place items in the top - bottom left - right

Question

I have a main container <div>that contains 4 or 5 other sub <div>s. The container has a fixed height and a fixed width. What is the best way to arrange sub divs so that they are in the upper, lower, and lower right directions?

I tried to swim the subtrees, but that just gives me the right and then the upper> lower queue.

Basically, I want this

[ sub div 1][sub div 3][sub div 4]
[ sub div 2][         ][sub div 5]

When I mark the code as follows:

<div id="container">
    <div class="subdiv">sub div 1...</div>
    <div class="subdiv">sub div 2...</div>
    <div class="subdiv">sub div 3...</div>
    <div class="subdiv">sub div 4...</div>
    <div class="subdiv">sub div 5...</div>
</div>

Note that sub divs can have a variable height but a fixed width.

Thank,

Answer 1

As far as I know, there is no way to do this.

CSS3, (-moz-column-width ..), , DIV . , IE7

, , 3

<div id="container">
    <div class='column'>
        <div class="subdiv">sub div 1...</div>
        <div class="subdiv">sub div 2...</div>
    </div>
    <div class='column'>
        <div class="subdiv">sub div 3...</div>
        <div class="subdiv">sub div 4...</div>
    </div>
    <div class='column'>
        <div class="subdiv">sub div 5...</div>
    </div>
</div>

Answer 2

CSS DIV:

display: inline-block

Answer 3

- CSS3 ( Damp), , JavaScript, . , .

I think the best way to do this with JS is to first split it evenly into column containers, as Damp suggested with the best guess. This should help those who have JS disabled. Then we JS measure the heights of the subdivs and move them if the original assumption was turned off. Assuming you are using the server side language to create the page, you should be able to split the columns evenly. You can probably even make a good estimate on the split by checking the length of the content (assuming its text) as a heuristic for the probable subdiv height.