Reputation: 10686
PROBLEM: cannot stack floats with CSS only.
In the example http://jsfiddle.net/9YQXP/7/ I have 3 divs whose width is 35% of its container. I will not know in advance the height of each div but I'd like the third div to stack right beneath the first one.
HTML
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
CSS
div {
text-align: center;
float: left;
width: 35%;
border: 1px solid #000;
}
#a1, #a3 {
height:20px
}
#a2 {
height:30px
}
OTHER ANSWERS: a similar question (Float stacking css) has been answered with a link to http://masonry.desandro.com/. However, it has been answered with a javascript solution and I too would prefer CSS only (or a working example with masonry).
Upvotes: 0
Views: 570
Reputation: 208040
This can't be done with CSS alone. Per the specs for floats:
5) The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
Upvotes: 2