Odd html5 / css behaviour


Please take a look at this: http://jsfiddle.net/MbrJf/

When I use inspect element, the body starts 100px from the top of the page, even though there is no margin or anything like that in the css. If the <nav> element is removed from the page, everything works ok (even if the margin-top rule is removed from the css, it works ok - but there is still a little gap).

The nav shouldn't be all the way at the top, but when the margin-top is added, it pushes the h1, address, and rest of the site below it... it is very confusing. I'm trying to accomplish this: http://imgur.com/zgBFm

Can someone make sense out of this?


<div id="wrapper">
    <h1><a href="index.html" title="Ozio Sushi">Ozio Sushi</a></h1>
    123 Fake Street West, Toronto
        <li><a href="about.html" title="About">About</a> </li>
        <li> <a href="menu.html" title="Menu">Menu</a></li>
        <li> <a href="gallery.html" title="Gallery">Gallery</a></li>
        <li> <a href="contact.html" title="Contact">Contact</a></li>


@charset "UTF-8";
/* CSS Document */

body { 
margin: 0px;
padding: 0px;
background-color: #362f2d;
a {
    text-decoration: none;
    border: none;
#wrapper {
    background-color: #362f2d;
    width: 100%;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
header {
    clear: both;
    width: 100%;
    display: block;
nav { 
height: 50px;
width: 100%;
background-color: #f7941d;
margin-top: 100px;
header h1 {
    font-family: Kaushan script, cursive;
    color: white;
    font-size: 60pt;
    font-weight: 300;
address {
    font-family: Lato, Arial, sans-serif;
    color: white;
    font-size: 8pt;
    font-style: normal;

li {
display: inline;
margin-right: 60px;
font-family: Lato, Arial, sans-serif;
color: white;
font-size: 16pt;
font-weight: 400;
#main {


Problem courtesy of: Peter Di Cecco


set the margin-top on the nav and the ul within the nav to 0:


The margins will push the body down, and the ul has the default margin which must be canceled (you should use a reset or normalize CSS file)


Then you'd want something like this: http://jsfiddle.net/MbrJf/4/? The underlying issue in that case is that the header isn't properly containing the logo h1 as it is floated. Applying one of the standard solutions like a clearfix or overflow:hidden will take care of that.

Solution courtesy of: Matt Whipple


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.