Sticky footer after position absolute wrapper - html

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

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 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

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 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!