Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Roman Gulevskiy
.a{fill-rule:evenodd;}techdegree
Roman Gulevskiy
Full Stack JavaScript Techdegree Student 1,122 Points

Problems with header floating/margin

Hi everybody! I'm a little bit confused with header floating.

Why when I'm using "float: left;" in the header element it has some margin top, when I'm not it hasn't.

I'm really confused and can't catch what I'm doing wrong.

Any help please! Thanx in advance!

Here is my code:

CSS:

body {
    background-color: #ccc;
    margin: 0;
}

img {
    max-width: 100%;
}

header {
    background-color: #fff;
    width: 100%;
    float: left;
}

nav ul {
    margin: 0;
    text-align: center;
}

nav ul li {
    display: inline;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
}

#content {
    list-style: none;
}

#content li {
    float: left;
    width: 45%;
    margin: 0 2.5%;
    padding: 0;
}

And html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/main.css">
    </head>

    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                </ul>
            </nav>
        </header>

        <div id="wrapper">
            <section>
                <ul id="content">
                    <li>
                        <p>Text</p>
                    </li>
                    <li>
                        <p>Text</p>
                    </li>
                </ul>
            </section>

            <footer>
            </footer>
        </div>
    </body>
</html>

3 Answers

Ana Gledovic
Ana Gledovic
7,465 Points

Hi Roman, Here's the thing. When you float some element, it goes out of regular flow and it is "not seen". You need to back elements in regular flow, which you can do with clearfix. Just put clear: both; in #wrapper (because it goes just after header), and you will be good with that. When you have this kind of problem, it could be useful to put borders on each element to see what's actually happening between elements.

Aurelien Schlumberger
Aurelien Schlumberger
6,127 Points
Aurelien Schlumberger
Aurelien Schlumberger
6,127 Points

One thing you can do to figure out why there is a margin to your header is to use the development tools of you browser if you are using Google Chrome, or Firebug with Firefox. Then inspect the element and see what are the paddings and margins.

What you can also do is making sure that there is no top margin on your header by adding

header {
 margin: 0;
}

See if that helps?

Roman Gulevskiy
seal-mask
.a{fill-rule:evenodd;}techdegree
Roman Gulevskiy
Full Stack JavaScript Techdegree Student 1,122 Points
Roman Gulevskiy
.a{fill-rule:evenodd;}techdegree
Roman Gulevskiy
Full Stack JavaScript Techdegree Student 1,122 Points

Thanx for the answers!

And if I understand right, when I use floating elements they are removed from the "normal elements stream"?

Where I can read (better see examples) about this topic more?