CSS Question

grahamor

Hi,

Please see the image below. The black box is a fixed height div.

The grey div's containing the ul's are floating left.

I want the smaller div's (ones with less destinations) to appear under each other if there is enough space in the black div)

So, UK and USA are fine where they are, but Canada, Capetown, Australia and New Zealand should appear under each other because there is enough space left in the black div.



I hope i have made myself clear

Thanks for any info/tips

DonkeyStyle \o/

I'd create 6 fixed size, left-floated divs to give you your columns... then where you want multiple rows in a column, just create some more divs inside that column.

Right now you've got divs that are just wrapping around because they've run out of horizontal room... they're doing their best to find a spot for themselves based on the flow of the other divs, but it's clearly not what you want.

p

I think this might be one of those things that's just not possible with CSS.

pauldiv

It you create two divs then each of your boxes could be made to flow into them with the natural flow of the document.

Say your boxes are 120 px wide. The left div could be made about 420 px wide with around 10-15 pixels padding around the boxes. This way they should drop in easily. Then do the same with the right div only use a different width.

Dades

I assume the country boxes need to be able to expand and maintain a coherent structure automatically? This looks to be a bit much to ask.

If not you could just use extra columns as suggested above, knowing how large in advance each of the separate boxes are.

Have you tried experimenting with different ordering of the boxes - e.g. from smallest to largest?

grahamor

Thanks for the replies and the ideas.

Unfortunately, the boxes are dynamic, sometimes only 5 country boxes appear at one time, so it's hard to judge which boxes will be where on the page, hence me not using fixed columns that float left.

Thanks again

mewso

Should be easy enough to get it working if you are willing to wrap any divs you need on top of each other within a containing div.

pauldiv

Not being able to predict the size, contents of, and number of boxes makes it even more of a headache.

I would experiement with css first but I think the page might be much easier to build using a table layout.

ron_darrell

CSS is not the way to go with this because:

a) You don't know in advance how many boses there will be
b) You don't know how big each of the boxes will be
c) Just because

Javascript on the other hand should be able to deal with this relatively easily. You'll need to write a script that finds out the height of each div and then dynamically reposition the divs into the layout you are looking for.

Give it a try yourself and if you can't get it to work come back to me - or I'm sure one of the other posters will run with what I've suggested and help you out.

Regards
-RD