Hello

 

I'm dividing a form in a dynamic amount of divs. I want them to line up nicely but at the moment I haven't found a way to do this. There are a variable amount of divs with different (unknown?) sizes. They are all placed inside a parent div and when a div is to be placed outside the div it should instead be placed in a new line.

 

I've tried using float, clear and some absolute and relative formatting but none works the way I want them to.

 

The left picture shows what happens with float. The right picture is how I want it to be.

 

Any tips on how to do this?

 

//Blom

Could you provide a link to this please as would make it easier to see the code and figure out why it is not working how you want it to.

Try this format:-

 

[div gray with a float]

[div green with a float]

[div blue with a float]

<div class="clear"> </div>

[div red with a float]

 

and this style:-

.clear { clear: both; width: 100%; height: 0; visibility: hidden; }

 

and the red div should go below the gray div.

I haven't tested this but I *think* you also could float the grey and green, but not the blue or red. If the position of them all is set to relative then the blues natural position should be to the right of green because green is float, and then red should fall below them all because blue is not float. For subsequent divs, just keep the position relative and it will sit on a new line.

 

Sounds realistically like your setup might be a bit more complex than this as you are creating divs on the fly, but if you can prove a concept to work, there is always a way to code it!

Thanks for the answers.

 

The "example" requires login but it doesn't look too much different to the picture so I hope it is understandable with just text and the picture. Otherwise I'll have to make some guest login.

 

The thing is that I don't know the size of the divs (red, green, grey and so on) and neither which ones that is showing. So they all need to have the same style, if there is no way to find out that a div is the last one in a row.

 

Thank you