Why doesn't my <div> float around another floated <div> while other elements do?
- by user1848605
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;
}
