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;
}