Question

I am having a lot of fun with the new HTML5 elements, but there is a feature of the nav element, or so I presume, that I do not understand. Why does it not fall into the lineup with other elements? What I mean is, my divs line right up from left to right and top to bottom. When I add the nav element, it just floats over everything in the top left corner. I can’t figure out if this is something intrinsically related to the nav element, or if it is the way I have my div elements arranged. It seems stupid to use the semantic nav element, only to have to couch it inside of a div.

HTML:

<header>
    <div id="logo">
        <a href="redactedurl.com" accesskey="1" tabindex="1" title="Take me home."> 
            <img alt="Logo and link to home page." src="../img/logo.gif" width="200" height="200" />
        </a>
    </div>
    <div id="cobCabRec">
        <h1>RECORD LABEL</h1>
    </div>
    <nav id="menu">
        <div class="menuLink"><a href="bands.php" tabindex="2" accesskey="2">BANDS</a> </div>
        <div id="releases"></div>
        <div id="distro"></div>
        <div id="store"></div>
        <div id="shows"></div>
        <div id="wholesale"></div>
        <div id="links"></div>
    </nav>
</header>

CSS:

#headWrap{
width:1024px;
height:200px;
background-image:url(../img/headGrating.png);
background-repeat:no-repeat;
background-position:center center;
}
#cobCabRec{
height:63px;
width:824px;
float:right;
}
h1{
font-family:"friz Quadrata TT";
font-size:53px;
margin:0 auto 0;
padding:0;
width:716px;
font-weight:bold;
}
#logo{
float:left;
}
#menu{
width:985px;
height:36px;
background-color:#000;
color:#fff;
padding-top:64px;
}
.menuLink{
font-family:oswald;
font-size:16px;
font-weight:bold;
}

Answer 1

I need to clear my floats! Thank you to Diodeus for pointing out the obvious.