problem with floats collapsing containing element...

[maya90]

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...

[ralph.m]

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;}

[maya90]

oh my gosh -- awesome!!!! :-)

thank you Ralph!!