0

I feel kinda ashamed that I have to post this question here. My webpage has a footer which I want to stay at the bottom, when I add content I want the footer to just move down.

I've tried several solutions which were available through stackoverflow, to no success unfortunately.

TL;DR Sticky Footer that sticks at the bottom

My HTML Structure:

<html>
<head></head>
<body>
   <div id="pageWrap">
       <nav></nav>
       <div id="contentWrap">
           <div id="contentHeader">some text</div>
           <div id="content">
               <!-- Content -->
           </div>
       </div>
   </div>
   <footer></footer>
</body>

Here's the odd thing: When I use the inspect element feature I notice my pagewrap height is 182px. My divs inside the pagewarp have much larger content than 182px, and I never even set a height.

Basically the elements inside the pagewrap fall outside of the bounds of that wrap. I feel like this screws up the footer location.

EDIT:

Relevant CSS:

html, body {  height: 100%;  }
#contentWrap{ width: 90%;  margin: 0 auto; word-wrap: break-word }
#content{ margin-top: 30px;}
footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #EDEDED;
    border-top: 1px solid #D6D6D6;
}
Dubb
  • 423
  • 1
  • 7
  • 21

1 Answers1

0

Try floating #pagewrap or add overflow:hidden. It makes the element content aware which may cause it to scale. That's all I can think of without seeing something of a demo.

You should also make sure the elements inside the #pagewrap are set to position:relative if you want them to scale #pagewrap.

deem
  • 1,252
  • 1
  • 19
  • 38
cpalinckx
  • 369
  • 2
  • 5