CSS: Footer overlapping content, other glitches

Change this:

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

Demo


See DEMO

I have made some CSS changes. Have a look. I hope it will help you.

Updated CSS

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}

Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.

Essentially, all you have to do is set <body> to:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Then apply flex:1 1 auto to the "main" or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:

#container {
      flex: 1 1 auto;  /*grow vertically*/
}

We added align-items:center in the flex parent to handle cross-axis centering (in our case, horizontal).

Here is an example snippet of the above:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #252525;
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container {
  color: white;
  background: #363636;
  padding: 2em;
  background: #363636;
  flex: 1 1 auto;
  /*grow vertically*/
  width: 55%;
  text-align: center;
}

#footer {
  color: #707070;
  height: 2em;
  font-size: small;
}
<body>
  <div id="container">
    <h1>A webpage</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
      nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
    <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
      libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
  </div>
  <div id="footer">This is a footer.</div>
</body>

Tags:

Html

Css

Sticky Footer

Recent Posts