Problem with floats collapsing containing element

HTML & CSS
1

WHY oh WHY do floats collapse containing elements? doesn’t make sense…

I have problem here:
http://mayacove.com/dev/css/floats2.html

why are <li>'s (gray bg, rounded corners) taller than their containing <ul>'s??? this is so frustrating… so the margins for the <ul>'s are not working…
I know I could give the <ul>'s a height, but this is not good practice, right? (esp for responsive design, which is what this pg will be eventually…)
(also: <li>'s have to be float:left; and display:block; I know this method works for IE7 and I can’t test on IE so I can’t run experiments just for IE…)

also have “collapse” prob with <nav>: if I remove red border from <nav> then the margin I set for it disappears completely:
http://mayacove.com/dev/css/floats2.html

would appreciate suggestions… thank you…

2

By default, floated elements hang out of a container (it would be a massive pain if they didn’t.) There are various easy ways to make the container wrap around the floated content, and the easiest way here is this:

ul {overflow: hidden;}
3

oh my gosh – awesome!!! :slight_smile:

thank you Ralph!!