Background colour with floated elements

[gandalf458]

On a page of my website at http://www.southgatecountyschool.co.uk/song.php below the menu does not have the blue background of the rest of the <nav> section which I suspect is due to other floated objects on the page. Can anyone enlighten me how to get the background colour please? The rest of the pages are okay.

[gandalf458]

Oh dear - I've done it again! I've fathomed the answer myself. The judicious use of <br style="clear:both"> seems to have solved the problem.

[John_Betong]

When a div is floated it requires a width and height element for the background color to be effective or as you discovered a line break with clear both.

[dresden_phoenix]

When a div is floated it requires a width and height element for the background color to be effective or as you discovered a line break with clear both.

To clarify: when an element CONTAINS ONLY FLOATS, and you wish IT to not collapse) (background to be visible, push down other elements, etc; ) You must cleat he floats some how. Adding a block element with clear:both as the LAST item will accomplish this. HOWEVER there are far better methods that dont require unsemantic markup.

Delete the BR and try giving the containing element "overflow:hidden"

Hope that helps.

[gandalf458]

Many thanks for explaining Dresden. I'll give that a go...

[RyanReese]

To clarify: when an element CONTAINS ONLY FLOATS, and you wish IT to not collapse) (background to be visible, push down other elements, etc; ) You must cleat he \

To clarify, when floats are the last child(ren) of a parent block, you must clear the floats

Off Topic:

Sorry