DIV and List question (newbie)

I'm building a test site to learn CSS. I can't figure out why my NAV list is not nested inside my HEADER. When I add padding to my list, the height of the header doesn't change. Also I can't vertically align my nav list in the header.
(this is hard to explain, I can't post URLs because I'm a new user...)

Here is the markup:

<div class="header">
<ul id="nav">
<li><a href="#">work</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div id="main">
<div class="leftCol"></div>
<div class="rightCol"></div>
</div>
</div>

-------------------------

Here is some of the CSS:

#nav {
list-style: none;
float: right;
margin: 0 20px 0 0;
}

#nav li {
float: left;
margin: 10px;
}

#nav li a {
color: #fff;
text-decoration: none;
}

#nav li a:hover {
color: #888;
}

-----------------------

NOTE: As a new user I'm not allowed to post a URL. It would be MUCH more helpful if I could post a URL to my test site so that people could see all the code.

Thanks

Ak

When you float an element, it essentially removes it from the boundaries of your containing element so your header won't 'stretch' to match the floated elements inside it unless you clear after the floated elements.

Now I know I will probably get shot down in flames for this, but the simplest way to do this that I have been using for years is just to create a class


And then apply that either as a div on its own after the floated elements and before the close of the header, or add the class to the header itself.


The more 'up to date' method is to use clearfix

And again, add this class to the parent element, in this case your header (as I did above)