What's causing my header to move about?

StackOverflow https://stackoverflow.com/questions/10531608

Question

I'm working on a simple layout that requires a header, footer and main content in between. However, something is bugging me a little. If I include an image beneath my header http://www.reversl.net/before/ everything sits exactly where I want. But if I remove the image my header gives itself a margin from the top of the page as shown here http://www.reversl.net/after/ I'm guessing it's related to my floated header and it's floated contents not being cleared. But I've included the clearfix hack and that doesn't seem to have changed things. Any ideas?

<body>
<div class="header clearfix">
<div id="wrap">
    <div class="wrap-inner">
        <ul id="nav-dash">
            <li><a href="#"><img class="header-avatar" src="http://placehold.it/15x15" width="15px" height="15px" alt="" /> YOU &#9660;</a>
                <ul>
                    <li class="first"><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">four</a></li>
                </ul>
            </li>
        </ul><!--.nav-->
        <div id="logo"><a href="#">LOGO</a></div><!--#logo-->
    </div><!--.wrap-inner-->
</div><!--#wrap-->
</div><!--#header-->


<div class="wrap-inner">
    <h1>Main Content Here...</h1>
</div><!--.wrap-inner-->


<footer>
<div id="wrap">
    <div class="wrap-inner">
        <p>Footer Text Here....</p>
    </div><!--.wrap-inner-->
</div><!--#wrap-->
</footer>
</body>
</html>
Was it helpful?

Solution

Hmm, why do you use multiple items with id='wrap'?

I added 

{
clear:both;
overflow:hidden;
}

to your main content container(it's also a 'wrap'), and it seems to work.

OTHER TIPS

It's due to the H1 margin in main content.

.wrap-inner h1 {margin-top:0}

Looks like you haven't set any base styles. For example:

H1 {
     font-size:2em;
     margin-top:1em;
     ......
 }

try this please

body
    {
    margin:0;
    padding:0;
    }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top