How To Remove Space At Top Of Page When Using Float?

I have found a few answers around the web where people have instructed that the way to remove the space at the top of web page is generally some form of: body { margin: 0;

Solution 1:

The margin is being caused by #wrapper section p. Remove the margin of that particular element and you should be fine.

Or as suggested, don't float your header.

You would still have the same problem with your footer though: if you were to apply a background-color to it you would also have a gap at the bottom caused by the child-p. In this case you are using clear which causes the same behaviour as for your header.

In general I would suggest you to take a better look on how and where to use float and clear ... http://css-tricks.com/all-about-floats/ should be a good start ;)

Solution 2:

I would suggest to use RESET.css to avoid such issue while designing the web pages. You can include the following reset.css in your web-page. These css are well know and tested

/**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    */html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

For more details regarding the reset.css you can follow : - http://meyerweb.com/eric/tools/css/reset/

Let us know once you apply the reset.css

Solution 3:

There is a margin-top by default for the h1 inside the logo anchor tag also margin:8px for the whole body element. Remove the margin-top for the h1 tag using the css below.

#logoh1{
    margin-top:0;
} 

To reduce margin top further use this:

body{
    margin-top:0;
}

Solution 4:

The float:left on your header element is the cause of this behavior !

At the very bottom of your CSS file put this :

header{float:none;}

make sure NOT to put a dot or hashtag in front of header.