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 Laurel Smith
Laurel Smith
18,836 Points

Problem with HTML header element appearing inside body div

I am working on building a website that uses jQuery to animate a sticky header. The animation works great, but first div of my body appears behind the header for some reason. When I use inspect element it shows the div stretching all the way to the top of the screen instead of starting after the header. For example, if I try adding top margin to the div the header content also moves down.

I can't use relative positioning in this case because it breaks the effect I've been trying to achieve with my header.

I have an idea that maybe this is an issue of margin collapsing, but can't seem to confirm one way or another. Is there a way to clear the div without changing the fixed position of my header? I am well and truly stumped on this one.

My code is still using some placeholders

<header class="container, primary">
    <h1>Laurel Ann Smith</h1>
    <span class="title">Front-End Web Developer</span>
</header>

<body>

<div id="video" class="container">
<!--
    <video></video>
-->
  <img src="img/me_and_max_web.jpg" alt="placeholder">
    <img class="arrow" src="img/arrow.png" alt="down arrow">
</div>

/*sticky header*/

header {
  border-bottom: 3px solid #3E3C40;
  background-image:url(../img/fresh_snow.png);
  margin:0;
  padding: 0;
  position:fixed;
  width: 100%;
  font-family: 'Great Vibes', cursive;
    font-size: 2.5em;
  height: 30%;
    text-align: center;


}

header .title {
  font-size: .8em;
  margin: 0;
  display:block;
  text-align:center;
  padding: 0;
}

header.sticky {
  font-size: 1.5em;
  height: 3em;
  background: #fafafa;
  text-align:left;
  padding-left: 20px;
  padding-bottom: 20px;
  transition: all 0.4s ease;
}

header.sticky .title {
  display:none;
}

body {
    background-image:url('../img/subtle_pattern.jpg');
}

.container {
  max-height:50%;
  padding: 0;
}
Unsubscribed User
Unsubscribed User
5,512 Points

Could you post some code? Are you using a fixed position header? Border-box box-sizing?

2 Answers

Mark Shaw
Mark Shaw
10,449 Points

Try giving the div the desired margin-top, and giving the header a margin-top with the same value but negative.

so something like 

header{

     margin-top: -30px;
}

div{

    margin-top: 30px;

}

See if that works

Laurel Smith
Laurel Smith
18,836 Points

That worked beautifully, thank you!

Mark Shaw
Mark Shaw
10,449 Points

Great! I'm glad I could help.

Unsubscribed User
Unsubscribed User
5,512 Points

Nice, Mark.

Mark Shaw
Mark Shaw
10,449 Points
Mark Shaw
Mark Shaw
10,449 Points

While it's difficult to really say what the problem is without seeing the code, be aware that setting an element to position: fixed; takes that element out of the normal document flow, much like giving it absolute positioning would. So your other div is ignoring the header, as if it weren't there.

Laurel Smith
Laurel Smith
18,836 Points

That does make sense, since the sticky header is using position: fixed. Is there a good way to clear the next div though?