Tom Tom - 19 days ago 8
CSS Question

Sticking CSS footer on bottom

I can't seem to get this footer to stick on the bottom despite trying numerous methods I searched for.

Basically I have the header at the top with a box shadow separating it from the rest of the page and I want the same at the bottom, with the content in the middle, any ideas what I am doing wrong? I have tried position fixed, bottom 0 but I can't get the box shadow to show using those methods or keep it centered.

Thanks!



html {
overflow-y: scroll;
}
body {
margin: 0;
background-color: #ffffff;
font-family: 'Ubuntu', sans-serif;
}
div {
display: block;
}
.header-wrapper {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container {
margin-right: auto;
margin-left: auto;
width: 940px;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
#header {
height: 60px;
padding: 20px 0 25px 0;
}
#header .logo {
float: left;
}
#header .logo a {
display: block;
width: 270px;
height: 60px;
text-indent: -999em;
line-height: 60px;
background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px;
background-size: 270px 60px;
}
#header .american-flag {
display: block;
float: right;
}
#header .american-flag img {
max-height: 60px;
}
#content {
height: 100%;
padding: 20px 0 0 0;
}
body a {
color: red;
text-decoration: none;
}
body a:hover {
text-decoration: underline;
}
.footer-wrapper {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#footer {
line-height: 60px;
height: 60px;
}

<html>

<body>
<div class="header-wrapper">
<div class="container" id="header">
<div class="logo">
<a href="/">URL</a>
</div>
<div class="american-flag">
FLAG
</div>
</div>
</div>
<div class="container" id="content">
Site content
</div>
<div class="footer-wrapper">
<div class="container" id="footer">
footer
</div>
</div>
</body>

</html>




Answer

I have applied Ryan Fait's sticky footer to your markup.

html,
body {
  height: 100%;
}
html {
  overflow-y: scroll;
}
body {
  margin: 0;
  background-color: #ffffff;
  font-family: 'Ubuntu', sans-serif;
}
div {
  display: block;
}
.wrap {
  min-height: 100%;
  margin-bottom: -60px;
}
.header-wrapper {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container {
  margin-right: auto;
  margin-left: auto;
  width: 940px;
}
.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}
#header {
  height: 60px;
  padding: 20px 0 25px 0;
}
#header .logo {
  float: left;
}
#header .logo a {
  display: block;
  width: 270px;
  height: 60px;
  text-indent: -999em;
  line-height: 60px;
  background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px;
  background-size: 270px 60px;
}
#header .american-flag {
  display: block;
  float: right;
}
#header .american-flag img {
  max-height: 60px;
}
#content {
  height: 100%;
  padding: 20px 0 0 0;
}
body a {
  color: red;
  text-decoration: none;
}
body a:hover {
  text-decoration: underline;
}
.footer-wrapper {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#footer {
  line-height: 60px;
  height: 60px;
}
<div class="wrap">
  <div class="header-wrapper">
    <div class="container" id="header">
      <div class="logo">
        <a href="/">URL</a>
      </div>
      <div class="american-flag">
        FLAG
      </div>
    </div>
  </div>
  <div class="container" id="content">
    Site content
  </div>
</div>
<div class="footer-wrapper">
  <div class="container" id="footer">
    footer
  </div>
</div>