Question

I have a container with background color green. Inside that green <div>, I have a <div> which is black and styled as a box (50px x 50px) – this <div> is floated to the left.

Now if I add a <p> to my markup after the grey <div>, I’d expect it to float around the grey <div>. And it does. However, when I substitue

with another <div> which is styled as box (set height and width), it doesn’t float around anymore, but disappears behind the floating div.

Even if I have first paragraphs which are floating around correctly and THEN I add the div (box), the paragraphs stop floating around and appear on another line.

HTML:

<div id="greencontainer">
    <div id="blackbox"></div> <!--this one is float:left;-->
    <p>A paragraph that floats around the previous div</p>

    <div id="anotherbox"></div> <!-- if I add another div with set width and height, it disappears behind the floated one, and even prevents the paragraph from floating around.-->
</div>

CSS:

#blackbox {
    width:50px;
    height:50px;
    background-color:black;
    float:left;
}

#p {
    margin:0px;
    padding:0px;
}

#anotherbox {
    width:50px;
    height:50px;
    background-color:grey;
}

Answer 1

Actually, part of the <p> itself, which is a block box, is also hiding behind your first <div>. That’s because it’s not being floated, so it’s being laid out in normal flow as if the first <div> was not there, because floating a box takes it out of normal flow.

Your <p> contains inline content (its text), however that inline content is able to flow around your first <div>, because inline content is made that way. It’s why you’re able to align an image to the left or right and text is able to flow around it without the image being in the way.

Your second <div>, like your <p>, isn’t floated, so again it’s being laid out in normal flow as if your first <div> wasn’t there. Since both of them have the same dimensions, it looks as if one is completely hidden behind the other.

In your code you have the second <div> coming after the <p>, so it shouldn’t affect the text. However if you meant to add it before the <p>:

<div id="greencontainer">
    <div id="blackbox"></div>
    <div id="anotherbox"></div>
    <p>A paragraph that floats around the previous div</p>
</div>

Then, upon reading my explanation above, the reason the text stops flowing around the first <div> becomes obvious: because your second <div> is in the way, hidden behind the first one. It’s that second element that’s pushing your <p> down.