Question

I have a main container <div> which holds 4 or 5 other sub <div>s. The container has a fixed height and a fixed width. What is the best way to position the sub divs so that they are arranged in a top->down then left->right manner?

I’ve tried floating the sub divs but that just gives me a left->right then top->down order.

Basically I want this

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

When I mark up the code like this:

<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>

Notice that the sub divs can have variable heights but fixed widths.

Thank you,

Answer 1

To my knowledge, there’s no way to do it.

There is some CSS3 that works only on some browsers to support multi-column layout (-moz-column-width, etc…) but I don’t know whether it would work with DIVs in the content. And I’m fairly certain it it’s not supported in IE7

The way I’d do it would be to break up the content into 3 columns containers

<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>