I have long since been looking for a way to keep nested block-level elements' backgrounds from traveling under floated content. Lets set the stage a little for clarity. I have a heading, an inline div, and a div I want to float to the right that has some highlighted content in it. If my inline div has a background applied to it, it will continue to run under the floated content to the right.
Introducing the "overflow:hidden;" declaration. I do not know much about the overflow property and have come to the conclusion that I need to know more. I consider myself pretty astute when it comes to CSS, but this fix, simple as it may be, eluded me for a long time. I used to just not code these circumstances, or worse, introduce a table to get things to fall correctly. Yuck.
Here's the fix:
Here's the right float Here's the right float Here's the right float Here's the right float Here's the right float Here's the right float Here's the right float
Overflow:hidden My title is very long and should wrap so we can see this thing in action
Overflow not setA purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div A purple inline div