Div to the right of float left, make it appear below - html

Question

I have the following HTML:
<div style="float:left; background-color:#0CC;">Floating Left</div>
<div style="background-color:#03C; color:#FFF;">Not floating</div>
Which appears like this in the browser:
How can I make the "not floating" div appear beneath the floating one?

Answer 1

Just add clear: both; into your CSS for the non floating element:
<div style="background-color:#03C; color:#FFF; clear: both;">Not floating</div>
http://jsfiddle.net/Kyle_Sevenoaks/SnAc9/

Answer 2

You need to clear the float
clear:left
since the sense of float:left is to float left to the rest of the content until you clear the float.
If I misunderstood you and you want the second div to let it's content be covered by the floated div ("appear beneath the floating one") you need absolute positioning instead of floating the divs.
Also it is recommended to use separate css-rules instead of inline-styles.

Answer 3

Do you mean that you want the left div to be inset?
http://jsfiddle.net/2xhGC/2/
HTML
<div class="inset">Inset div that is wrapped by the other content.</div>
<div class="article"><!-- start slipsum code -->
<h1>I gotta go</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non justo ante, at auctor odio. Phasellus suscipit facilisis ligula eu dignissim. Praesent eget odio nisi. Sed in hendrerit massa. Aliquam laoreet fermentum sapien, vitae placerat velit pellentesque vel. Aliquam lectus nibh, porttitor non laoreet eget, varius ac enim. Vestibulum feugiat metus rhoncus libero rhoncus commodo. Phasellus id auctor nisi. Sed hendrerit eleifend egestas. Praesent et tristique nunc. Aliquam id velit tortor.</p>
<h1>Uuummmm, this is a tasty burger!</h1>
<p>Nullam tempus mauris id velit lobortis varius. Mauris tempor aliquet diam, eu egestas augue ultricies id. In cursus ullamcorper velit quis viverra. Maecenas non nisi erat. In hac habitasse platea dictumst. Ut ipsum turpis, consequat sit amet aliquet a, rutrum at erat. Vestibulum auctor, risus quis elementum accumsan, elit sem ultrices est, ut interdum sem erat id leo. Aliquam adipiscing ultricies justo, sed facilisis ipsum congue eget. Duis sem elit, faucibus non aliquam eu, pulvinar nec elit.</p>
<h1>Uuummmm, this is a tasty burger!</h1>
<p>Suspendisse venenatis iaculis est in malesuada. Nunc sit amet arcu eleifend felis bibendum rhoncus eget eu ante. Maecenas molestie, purus eget bibendum rhoncus, ipsum orci lobortis enim, sit amet congue nisl urna vitae arcu. Nullam eget ipsum sapien, ac accumsan augue. Suspendisse consequat aliquet commodo. Morbi vel arcu non risus tristique fermentum. Morbi viverra nisl nec dui iaculis pretium. Morbi id viverra erat. Donec molestie euismod ipsum, id commodo purus lacinia at. Ut auctor turpis sit amet erat ullamcorper eu gravida neque iaculis. Sed augue purus, aliquam sit amet faucibus quis, dapibus vitae odio. Nulla mollis faucibus pharetra. Phasellus eleifend sodales nisi id suscipit.</p>
<h1>I can do that</h1>
<p>Curabitur ac sem metus, in ornare lacus. Duis auctor hendrerit viverra. Morbi posuere fermentum laoreet. Suspendisse potenti. Phasellus auctor lacinia tristique. Mauris interdum turpis et libero fringilla a consectetur ligula malesuada. Suspendisse urna neque, sagittis nec suscipit eleifend, imperdiet in arcu. Cras sit amet arcu metus. Curabitur cursus, justo sed tempor volutpat, felis justo dapibus risus, non porta sapien lectus tempor arcu. Nunc vel enim lectus, et iaculis urna.</p>
<!-- please do not remove this line -->
<div style="display:none;">
lorem ipsum</div>
<!-- end slipsum code --></div>
CSS
.inset{
margin:1em;
padding:1em;
background-color:#ff0000;
float:left;
width:75px;
}
.article{
padding:1em;
background-color:#ccffcc;
}
.article p{
line-height:1.4em;
margin-bottom:.6em;
}

Answer 4

You should use clear: left which means the element will not accept floated elements to the left of itself and will therefore jump down beneath it.

Answer 5

You have to "clear: right" the first div...