CODEWITHSUNDEEP
htmlcss
Oleg
Oleg

Reputation: 10686

Stacking float css

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

Answers (1)

j08691
j08691

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

Related Questions