Question

Look at this JSBin example. If I float an element, it will move the text surrounding it (like it should) but it will still appear over an element’s background, which I don’t want. How can I fix this?

Answer 1

You should add overflow:hidden to the element whose background is extending behind the float. In your case this would be your #hello div.

#hello {
 background-color: #ffc; 
 padding: 1em;
 overflow:hidden;
}

http://jsbin.com/izedip/3/edit#preview