All the contents of your div are floated You need to either put some html in there that isn't floated and apply the 'clear' CSS property to it, or use a self-clearing technique (google for "css self-clearing").

It's most likely because the floated list items aren't being cleared. Try adding a clearing div after the <ul>:

<div class="clear"><!-- --></div>

Then have the css:

.clear { clear:both; }

You may need a little negative margin-top on the <ul> too to pull it up into place

all your list items are floated left and your links are inline, and that's what happens....

best to swap float:left with display: inline to get a horizontal menu from an unordered list and add some margin to the links

i just added:

header #nav ul{

margin: 0;
padding:0;

and it cleared, check it out