CODEWITHSUNDEEP
csscss-float
Salman Virk
Salman Virk

Reputation: 12307

Floating divs: overlapping boxes, but content on second box is still pushed down

I have the following HTML:

<div id = "container">
    <div class="block pink float"></div>
    <div class="green block">A</div>
</div>

and the following CSS:

    .block {
        width: 200px;
        height: 200px;
    }

    .float { float: left; }
    .pink { background: #ee3e64; }
    .green { background: green; }

What I see in the output is that green box is hidden beneath the pink? Why is it so? And, why A is not shown inside Green box?

See the code here:

http://jsfiddle.net/mazdakiat/cu9Cr/

​

Upvotes: 4

Views: 1116

Answers (2)

AndyPerlitch
AndyPerlitch

Reputation: 4729

Floating the pink box takes it out of the flow of the document. The green box then scoots over to where it would be if the pink box was not there at all (text inside elements however wrap around floated elements). The pink box shows on top because without any z-index attribute specified on either object, browsers place elements appearing first in the html higher in z-index than the elements below.

[update] as per mrtsherman's comment below, setting the z-index on any element won't have any effect unless their position is set to relative, absolute, or fixed.

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

When you float an element it takes it out of normal flow. So by floating pink you allow the green block to slide in underneath it. The A inside the green block is different though. This is a child and the pink block pushes that content. It appears underneath because pink block has completely covered green block and pushed content out the bottom. See this fiddle for a better picture.

http://jsfiddle.net/cu9Cr/1/

Upvotes: 3

Related Questions