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

Brian Houlihan
Brian Houlihan
6,347 Points
Posted by Brian Houlihan
Brian Houlihan
6,347 Points

Div hidden below Fixed Position Navbar. Clearfix issues with CSS

I'm having trouble with clearfix and the fixed position navbar. The first div immediately following the navbar is hidden below and I can't figure out how to get it to display below the navbar.

Any help or suggestions would be greatly appreciated!!

Here is the HTML for the navbar:

      <header class="main-header group">
          <a href="index.html">
          <img src="img/logo.jpg" id="logo">
          </a>
        <nav>
          <ul class="main-nav">
            <li><a href="index.html">Work</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>

Here is the CSS:

/************************
Header
************************/

.main-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: red;
  margin: 0 auto;
  /*min-height: 50px;*/
}

#logo {
  height: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 20px;
  margin-top: 0;
  float: left;
}

/************************
Navigation
************************/

.main-nav {
  float: right;
  padding: 10px;
  background: green;
  /*display: inline-block;*/
}

.main-nav li {
  margin: 15px 10px;
  float: left;
  display: inline-block;
}

/************************
Clearfix
************************/

.group::after {
  content: " ";
  display: table;
  clear: both;
}

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Brian,

The clearfix hack is meant to have your header clear itself so it can contain its floated children.

The reason the div is covered is because fixed position elements are removed from the document flow and do not take up any space. So your div is beginning at the top as if your header isn't there. What you have to do is use padding or margin to take up the space that would have been occupied by your header if it was in the normal flow.

You could either assign a top padding to your body.

body {
    padding-top: 100px; /* This should be equal to the height of your header */
}

Or you can target that first div and give it a top margin equal to the height of your header. This will push it down from the top so it is below your header.

Brian Houlihan
Brian Houlihan
6,347 Points
Brian Houlihan
Brian Houlihan
6,347 Points

Thanks Jason! I had played around with this but was not sure if that was an acceptable practice. Thank you for explaining it.

Quick follow up question, is there any harm in setting a margin-top vs. padding-top? I can't think of any but I thought I'd ask to be safe.

Thanks again!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

For certain designs especially ones that don't have background colors or images with the div that follows, it probably won't matter what you use. It will look the same visually. I think you'll have to take it on a case by case basis though.

Suppose your header has a height of 100px and you want 30px of space between the content of your div and the bottom of the header.

You could assign 130px of top padding to the body or 130px top margin to the div or some combination of the 2.

However, if your div has a background color then you'd probably want it to extend to the bottom of the header and not start 30px below it leaving a gap between them. In that case, you would want to use padding-top: 130px on your div. This way the background color extends all the way up.

I should have mentioned that it's probably better to use em's instead of pixels when setting this spacing. If the user increases the font-size in their browser then it's going to increase the height of your header. If your spacing is in pixels then it means your header could start to cover up your div again. By setting the spacing in em's then the spacing will also increase with a user font-size increase.

It won't be a perfect match but still better than using pixels.