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 frvncisco
frvncisco
3,101 Points

Building a Website Course: Section hides hides behind header tag. The're somehow attached to each other. Bad CSS?

I've been working on my website following the Building a website course, all HTML tags seem to be in the right place. When styling the margin on the section tag (which holds the main content of the page in my site), the header tag also move down, I've tried different methods with CSS but the problem still persist.

Here is the code on JSFiddle

Can someone help me? Why does this happen? Thanks!

1 Answer

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Francisco,

The problem is a result of the header being floated left. That's removing the header from the normal document flow. To fix this, have #wrapper clear the float. There are a few different ways of doing this.

/************************************
HEADING
*************************************/
header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

/* the easy fix */
#wrapper { clear: left; }

/* still easy, slightly more generic */
#wrapper { clear: both; }

/* a generic fix you'll find more often in example code */
#wrapper::before {
    content: "";
    display: table;
    clear: both;
}

Guil has a great video called Clearing Floats that helps explain what's going on.

Cheers

frvncisco
frvncisco
3,101 Points

Thanks a lot! I was going crazy over this, I am actually watching the course that contains that video but I haven't gotten to that part yet. Again thanks a lot! :D