List not nested in DIV. Why? (newbie)

Hi, I’m creating a test site to learn CSS:

http://www.smudgestudio.ca/test/

I can’t figure out why my NAV list on the right is not nested inside the black HEADER. I know I could declare a height on the HEADER so that the NAV appears to be inside the header, but I shouldn’t have to do that. Must be something wrong with my CSS. Any suggestions?

Thanks!

Ak

Hi akirk. Welcome to the forums. :slight_smile:

This is a common issue. The reason is that parent elements don’t wrap around floated elements by default. (The floats hang out of the parent unless you force the parent to contain or wrap around them.)

You can easily fix this by adding this to your CSS:

.header {
  overflow: hidden;
}

Here is a longer explanation: http://pageaffairs.com/notebook/containing-floats

Thanks Ralph.M!

That was extremely helpful. I think I’m going to like it here. :smiley:

It’s a great forum, indeed. I’m pretty sure I’ve learned more here than from all books, sites and courses put together. :slight_smile: