Sticky footer after position absolute wrapper

Question

I have a wrapper, which needs to be horizontally centered. I know of no other way to do it, except using position absolute.

#wrapper {
    width: 721px;
    height: 720px;
    position: absolute;
    margin: auto;
    top: 136px;
    left: 0;
    right: 0;
    background: white;
    clear: both;
}

It contains three other divs, which are floated. If I change position of the wrapper to relative, those divs mess up.

____________________________________________
header
____________________________________________

         __wrapper____________
         |         |          |
         |         |          |
         |  div1   | div2     |
         |         |          |
         |         |          |
         |         |          |
         |_________|__________|
         |     div3           |
         |____________________|

__________________________________________
footer
__________________________________________

But I want to have a sticky footer, which will be always at the bottom of the site. No matter how much content I have, it will stay at the bottom of it. I could achieve it if my wrapper wasn't position:absolute, but since it can't push the footer bottom, I want to know is there any other way to do it?

.footer {
    border-top: 1px solid #dcdcdc;
    max-width: 100vw;
    font-weight: bold;
    text-align: center;
    background: #f0f0f0;
    width: 100%;
    height: 80px;
}

As you can see in JS-FIDDLE the footer is hiding behind header.

Answer 1

If u don't want to use flex, this may help

First, it is not necessary to use position absolute to horizontally align a div.

<div id="outer">
 <div id="inner">
 </div>
</div>

<style>
 #outer {
  background-color: green;
 }
 #inner {
  left: 0;
  right: 0;
  margin: auto;
  height: 300px;
  width: 400px;
  background-color: red;
 }
</style>

Here is the fiddle https://jsfiddle.net/x2j325n4/

Floating inner div's drops the height of wrapper to 0px. So replacing floats with display:inline-blocks may help.

<style>
#header {
    width: 100%;
    height: 50px;
    background-color: pink;
}
#wrapper {
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
}
#div1 {
    width: 30%;
    height: 400px;
    display: inline-block;
    background-color: grey;
}
#div2 {
    display: inline-block;
    width: 60%;
    height: 400px;
    background-color: red;
}
#div3 {
    width: 100%;
    height: 400px;
    display: inline-block;
    background-color: blue;
}
#footer {
    width: 100%;
    height: 50px;
    background-color: green;
}
</style>
<div id="header">
    Hey i'm header
</div>

<div id="wrapper">
<div id="div1">
    first div
</div>
<div id="div2">
    second div
</div>
<div id="div3">
    third div
</div>
</div>


<div id="footer">
    Hey i'm footer
</div>

Fiddle : https://jsfiddle.net/rjhwxdL5/

or if u want the footer to stay at the bottom of your viewport, just use position: fixed; bottom: 0; in your footer

Answer 2

This is a rough throw together, but in modern web development we get the joys of the wonderful flexbox. Here is a quick example

<div class="wrapper">
<div class="flex-wrapper">
  <div class="flex-container">
    <div class="div1">Box1</div>
    <div class="div2">Box2</div>
  </div>
  <div class="div3">Box3</div>
</div>
</div>

.wrapper {
  display:flex;
  justify-content: center;
  align-content: center;
  height: 500px;
}
.flex-wrapper {
  display:flex;
  flex-direction: column;
  align-self: center

}
.flex-container{
  display: flex;
  position: relative;
}
.div1,.div2 {
  height:100px;
  width:100px;
}
.div1 {
  background-color:blue;
}
.div2 {
  background-color:red;
}
.div3 {
  background-color:green;
  width:200px;
  height:100px;
}

Just use that type of layout, but make another container around the 'wrapper' so that the footer isnt affected.

https://jsfiddle.net/wxokadrx/

Also, in case you are unfamiliar with flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 3

Are you using bootstrap? With bootstrap, your layout would be as simple as this code:

<div class="navbar navbar-fixed-top">
  you header
</div>

<div class="row">
 <div class="col-md-3 col-md-offset-3">
   your div1
 </div>
 <div class="col-md-3 col-md-offset-6">
   your div2
 </div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">
   your div3
 </div>
</div>


<div class="navbar navbar-fixed-bottom">
  your footer
</div>

And give to the CSS:

html, body {
  padding-bottom: 55px;
  padding-top: 55px;
}

As this should fit the navbar well in both top and bottom sides.

EDIT: Because you do not use frameworks, then:

Add this the css footer.

position: fixed;
bottom: 0;

This will show you the footer, because it is hidden behind the header.

Answer 4

You should try clear property of CSS (in my case I've used a div class called clearfix), put this after .box2 like:

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.clearfix:before {
  content: '';
  display: table;
}

Have a look at the snippet below (use fullscreen mode):

.header {
    min-width: 720px;
	top: 0;
	left: 0;
	right: 0;
	max-width: 100vw;
	line-height: 80px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	border-bottom: 1px solid #dcdcdc;
	background: #f0f0f0;
    position: fixed;
    width: 100%;
    height: 80px;
    z-index: 1;
}
#wrapper {
  border: 1px solid blue;
  width: 721px;
	background: white;
  margin: 120px auto 40px;
}
.box1 {
  clear:both;
  display: inline-block;
  float:left;
  height:300px;
  width:360px;
  border: 1px solid black;
}
.box2 {
  clear:both;
  display: inline-block;
  float:right;
  height:300px;
  width:350px;
  border: 1px solid black;
}
.footer {
  border-top: 1px solid #dcdcdc;
  max-width: 100vw;
  font-weight: bold;
  text-align: center;
  background: #f0f0f0;
  width: 100%;
  height: 80px;
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.clearfix:before {
  content: '';
  display: table;
}

<div class=header>
Asdf
</div>
<div id="wrapper">
  <div class="box1"> asdf</div>
  <div class="box2"> asdf</div>
  <div class="clearfix"></div>
</div>
<footer class="footer">
ASDAFASFAFASFSAF
</footer>

Hope this helps!