Menu
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
663
Basically what you do is make both divs/columns very tall by adding a padding-bottom: 100% and then "trick the browser" into thinking they aren't that tall using margin-bottom: -100% .
The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.
Place both DIVs into a container DIV that's set to 100% of page height and set both interior DIVS to 100%. They will fill up the container DIV and the height of both will be equal.
The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents.
You're going to have to do this with JavaScript. If you're using jQuery, there is an excellent plugin called Masonry. There is also the non jQuery version.
To quote the README on GitHub:
Masonry is a dynamic grid layout script. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
The single column layout is probably what you're looking for.
If you don't mind leaving older browsers in the dust, there are the CSS3 column properties. There's an example here, on Quirksmode, and some documentation on the MDN.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
