Divs spreading auto over 2 columns

[ThomasJSmart]

Im looking for a better way to do this:

<div style="width:800px">
<div style="width:390px; float:left; margin-right:10px">content dynamic length</div>
<div style="width:390px; float:left">content dynamic length</div>
<div style="width:390px; float:left; margin-right:10px">content dynamic length</div>
<div style="width:390px; float:left">content dynamic length</div>
<div style="width:390px; float:left; margin-right:10px">content dynamic length</div>
<div style="width:390px; float:left">content dynamic length</div>
</div>

the effect is something like this:
[1] [2]
[3] [4]
[5] [6]

when all divs are the same height it looks fine, 2 columns of seperate div windows. however the contents of each window is dynamic (as is the ammount of windows) and when the contents of the windows starts to differ the spacing goes all awry.

something like this for example:
[1] |2|<- double height window
| |
[3] [4]
[5] [6]


how can i keep the spacing nice?

so it would be more like this:
[1] |2|<- double height window
[3] | |
[4] [5]
[6]


I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[vicvirk]

create two columns and populate each separatly

<div style="float:left;width:390px;">
	<div style="width:390;">1</div>
	<div style="width:390;">3</div>
	<div style="width:390;">5</div>
</div>
<div style="float:right;width:390px;">
	<div style="width:390;">2</div>
	<div style="width:390;">4</div>
	<div style="width:390;">6</div>
</div>
<div style="clear:both;"></div>

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers

 

[camyba]

You can use a table and it will look better even if the height is different.

There are ways to do it with divs but tabel is not a bad thing when you have something like this.

 

[ThomasJSmart]

i should have added to my post but 2 columns like that (or a table) is not possible for a few reasons.

the windows are all dynamically loaded and they have to be ordered

1 2
3 4
5 6

not
1 4
2 5
3 6

the windows and contents are loaded from a complicated database that would take to much work to sort out which windows to load on which side.

the other thing is i want each column more or less of equal hight. if i just put 3 windows left and 3 windows right (as in this example, in the actual site its more like 20-30 windows each with 1-40 lines of items) then the left and right column height is going to differ, the difference could be quite a lot. if window 1,3,5 all have only 2 items and window 2,4,6 all have 5 items then there are equal ammount of windows left and right but the columns are completely different in height.

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[ThomasJSmart]

ow and 1 more thing i forgot, the contents of the windows could change dynamically clientside. so if its fixed into 2 columns or a table and the window grows larger because of content being added the height will not sort itself out. in the current float:left setup the windows can still move client side if one side gets longer and pushes another over.

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[camyba]

The solution to this problem might be javascript. You could keep your code and after the DOM is loaded and proper calculation you could modify the content to serve your needs.

 

[ThomasJSmart]

you mean loop through each window and get the height, add up all the heights, get the mid point. see which window is at the midpoint. then move them arround?

wouldnt that be terribly complicated and slow over 40 windows?

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[ThomasJSmart]

this is the site by the way, maybe this will make it clearer what is needed

http://start.thomassmart.com

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[Vragabond]

I have no idea why things are not working out for you. Looking at your code and at what you want, the way you're doing it should work. One thing to note... Do not put margins on one element and not on the other one (that can cause problems). Try putting similar margins on both and see if it works then. Because for what you want, using float would be the best solution.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ThomasJSmart]

the margins are all within the customize div right? thats what you mean? i still need to clean that system up, the actual window divs should all be clean with no extra margins tho.

float seems to be failing though, the Y start point for the second window is always the bottom of the previous window. it doesnt like at the window its below :/

might have to go for camyba's suggestion and make it all absolute positioned with a JS check.. effort though >.<

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!