tags:

views:

268

answers:

4

I'd like to have 'b' be equally distributed along 'a' like this :

[1        2         3        4]

It would be nice that if there is not enough space, then 'a' block extends to the next line. Here is the html structure, I'd like, but its not fixed in stone and can be modified.

<html>
    <head>
        <style>
            .a { width: 100%; border: 1px solid; float: left; }
            .b {  width: 100px; border: 1px solid red; float: left;}
        </style>
    </head>
    <body>
        <div class'a'>
            <div class='b'>1</div>
            <div class='b'>2</div>
            <div class='b'>3</div>
            <div class='b'>4</div>
        </div>
    </body>
</html>
A: 

I think you are looking for smart columns like these described in this example using jQuery. You can also try a live demo.

Guido
A: 

What are you saying is the problem? The wrapping effect doesnt work properly when the width of .a is less than 400px? Im assuming that .a's height doesn't meet the bottom of the 4th .b div in this case. you may need to add a <br clear="all" /> after the .bs inside .a.

Andrew Bullock
A: 

Maybe the best thing would be to make .b an inline block and make its width 100%.

rmarimon
A: 

Am correct in thinking you want to achieve this:

[[1   ][ 2  ][  3 ][   4]]

to essentially give this (with the 'b' borders hidden):

[1    2    3    4]

but where you have an arbitrary number of fixed-width inner items, and the outer container is of arbitrary width?

I'm not really sure there's a way of achieving that without delving into javascript :(

Matt Sach