floating navigation list

I made a little example of my problem here: http://peterbriers.be/test/float_html5.htm开发者_StackOverflow中文版l

As you can see, I have a 'navigation list', and a floating header. WHY is the header IN the navigation list? That is'nt normal behaviour is it? The navigation list even inherits the height of the header. :s

This has nothing to do with HTML5. Did you want to clear:both on the nav? You floated the header, floated elements are taken out of flow so the nav acts like it isn't there.

If clearing doesn't do what you want, please include information as to what your desired layout needs to be.

EDIT for clarification and confusion:

The nav starts at the same vertical area as the heading because the heading is floated. It acts like it isn't there, but the clearfix on the ul adds the invisible element after the heading because source-order wise its after it. The clearfix then makes the element appear to contain it. Remove the clearfix and all that space will not be there.

Also, you still have not told us how you want it to look ( for reasons I do not know of ).

This is actually very normal behaviour. If you check the W3 information on CSS Float (http://w3schools.com/css/css_float.asp), you will notice this information:

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

The elements after the floating element will flow around it.

The elements before the floating element will not be affected.

If you take your code and just start button mashing after the word "Personal" in your header, and make the word Personal so long that it fills your entire screen width, you'll notice that the navigation bar actually drops below the header at that point. It's actually just doing what Float was intended to do. If you want your navigation bar below your header, maybe use a small table cell with border="0" and width="100%" so that you take up the entire screen width, causing float to drop below it.