CODEWITHSUNDEEP
htmlcss
Yo Soy Fiesta
Yo Soy Fiesta

Reputation: 39

Sticky footer covering content

I'm trying to publish my portfolio site and I'm almost done, but I'm having a problem with my sticky footer covering content when there's enough content to need to scroll down. I've tried messing with padding and margins all afternoon but I still can't seem to get it the way I want it.

Basic HTML skeleton:

<body>
  <header>
   <nav>
   </nav>
   </header>
  <div id="wrapper">
   <section>
    <ul id="gallery">
      <li>
      </li>
    </ul>
  </section>
  </div>
 <footer>
 </footer>
</body>

Footer:

  footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 0.425em;
  text-align: center;
  clear: both;
  padding-top: 10px;
  color: #ccc;
  border-top: 5px solid #cc7a00;
 }

Any help would be appreciated!

Upvotes: 0

Views: 2830

Answers (3)

katniss.everbean
katniss.everbean

Reputation: 550

After inspecting the HTML on the page you mentioned above, it looks like you might have some un-cleared floats. You can read more about floats and why they need to be cleared here: https://css-tricks.com/the-how-and-why-of-clearing-floats/.

The short answer is the wrapper isn't increasing its dimensions to encompass its children because of those floats. If you inspect your page using dev tools, you can see the wrapper essentially has no height. That means adding a margin to it isn't really going to do anything.

If you were trying to add margin and padding to the footer itself, that won't work either since you're using position:fixed. You've told it to stick to the bottom of the page and not affect the other content on the page. It wouldn't make sense to let content scroll underneath the footer and still let it have a margin that pushes away other content, right?

There are a bunch of ways to solve this problem. Here's one-

To solve your float problem, you can use the overflow:auto trick:

#wrapper {
  overflow:auto;
}

Read more about overflow:auto and floats here: Why does 'overflow: auto' clear floats? And why are clear floats needed? Please note this doesn't really clear the floats but the effect is that the wrapper height will respond to its children which is what we really need here.

Then adding some extra margin on the bottom of the wrapper div to account for the height of the footer should work:

#wrapper {
  overflow:auto;
  margin: 0 auto 100px auto;
}

The margin property above sets the margin-top to 0px, margin-right to auto, margin-bottom to 100px, and margin -left to auto. I suggested this becuase the page you linked to already had margin: 0 auto; (margin top and bottom 0, and margin left and right auto) to center the wrapper in the page. Otherwise, if you only needed to adjust the space at the bottom you would use margin-bottom: 100px;

Upvotes: 3

Petar-Krešimir
Petar-Krešimir

Reputation: 464

Try adding

padding-bottom: 97px;

to your HTML element

EDIT

html { padding-bottom: 97px; }

97px is the height of your footer.

Upvotes: 3

Kai
Kai

Reputation: 2599

On your <div id="wrapper"> add to the CSS: bottom : someValueMatchingTheFooterHeight;

Upvotes: 0

Related Questions