I have two columns and want to stack divs of different heights in order of appearance.
The divs are dynamically created.
If i only float them on 50% of width, soon I come in situation that div #4 is 5 times higher than incoming few divs. Then next div is top aligned with bottom of previous div.
I need to fit child divs in container to be exact match like this:
----- -------
1 2
-----
3 -------
----- 4
5
-----
6
-----
7 -------
----- 8
9
-----
10 -------
11
-------
-------
-----
Here is code snippet what I have done:
<style>
.box {background:#20abff; color:#fff; width:50%; margin: 5px;}
.left {float:left;}
.right {float:right;}
.container {width:205px;}
</style>
<body>
<div class="container">
<div class="box left" style="height:60px;">1</div>
<div class="box left" style="height:80px;">2</div>
<div class="box left" style="height:30px;">3</div>
<div class="box left" style="height:70px;">4</div>
<div class="box left" style="height:60px;">5</div>
<div class="box left" style="height:20px;">6</div>
<div class="box left" style="height:40px;">7</div>
<div class="box left" style="height:90px;">8</div>
<div class="box left" style="height:30px;">9</div>
</div>
</body>
and it looks similar to this
http://dl.dropbox.com/u/142343/divstack.html
appreciate help
See Question&Answers more detail:os
