Basically I have a bunch of DIVS:

 

<div class="wrap-layers"></div>

<div class="wrap-layers"></div>

<div class="wrap-layers"></div>

<div class="wrap-layers"></div>

<div class="wrap-layers"></div>

<div class="wrap-layers"></div>

<div class="wrap-layers"></div>

<div class="wrap-layers"></div>

 

These are small 135px width blocks and a fluid heights! The main div which contains the divs above is 540px width and 400px height. So the first 4 divs are displayed in a line next to each other but the 5 div needs to drop down below the first div however it does it dropds to the left but below the div with the highest height! Please see image below:

 

Left image is what I am getting and the right image is what I want to get:

 

 

Please see live example: http://www.wine-source.com/testing-page it is the center box with all the tick boxes etc.

 

Thanks, if someone knows how to do this please let me know

try experimenting with 'clear:both'.

The image in your post shows three columns but the text and link have four columns, so my advice is for four columns:-

 

Make four containing divs, each with float: left; so they sit side by side, then put two divs inside each containing div and the lower one will sit immediately below the top one like the right set in your image instead of below the bottom of the div with the most height.

The image in your post shows three columns but the text and link have four columns, so my advice is for four columns:-

 

Make four containing divs, each with float: left; so they sit side by side, then put two divs inside each containing div and the lower one will sit immediately below the top one like the right set in your image instead of below the bottom of the div with the most height.

 

Thanks for help that should fix it, my head was blank thanks for reminding me about float:left; etc.

Nope cant get it working, the code that I pasted above is create on the fly with PHP. I can only edit each one of the div if I create a column div it will create that div around every div I cant set it to go around certain divs.

I can't understand why you can't create the column divs with float: left; to contain two inner divs, but if you can't, try a clear: right or clear: left; as shaunbaker suggested (but I'm not sure this will work for all the lower divs, it may only work for the first one).

 

I know my solution would work, it's a pity you can't do it for some reason.

I can't understand why you can't create the column divs with float: left; to contain two inner divs, but if you can't, try a clear: right or clear: left; as shaunbaker suggested (but I'm not sure this will work for all the lower divs, it may only work for the first one).

 

I know my solution would work, it's a pity you can't do it for some reason.

 

Yeah the developer of the feature will have to sort it out, your solution would or worked perfect.