How to make footer stick to bottom of wrapper with bottom margin? - html

Question

I´m trying to make a footer that sticks to the bottom of wrapper, but leaving a bottom margin so that the pattern image on the body background can be seen.
I came accross the sticky footer at
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
which worked great, but all my attempts of adding margin/paddings to footer/ wrapper/ body didn´t.
I guess it must be a pretty simple thing, but I´m not finding it. Thanks for any hints/ suggestions!
Here´s the relevant CSS:
*
{
margin: 0;
}
html, body
{
margin-top: 0px;
margin-bottom: 25px;
background-repeat: repeat;
background-image: url(images/modulo-pattern-grey-light.gif);
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -98px;
background: #fff url(images/footer.gif) left bottom no-repeat;
width: 980px;
box-shadow: 4px 4px 5px #999;
}
.footer, .push
{
height: 98px;
}
.footer
{
margin-left: 490px;
margin-right: 40px;
background-color: #bc4c9b;
}
HTML:
<div id="wraper">
<div class="header"></div>
<div class="logo">
</div>
<div class="menu_container">
<div class="main_menu">
<ul>
<li>Home</li>
<li><a class="selected" >Quiénes Somos</a></li>
<li>Consultoría</li>
<li>Capacitación</li>
<li>Académico / Artículos</li>
<li>Alianzas</li>
<li>Proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div class="quienes_pic"></div>
<div class="quienes_text"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
Sorry I didn´t mention, but Fixed position won´t work, since I want the same footer to work on different pages with differents heighs. The idea was to have the same wraper and footer through all the pages, and then assigning different body ids to set the different heighs
Pretty much like is done through this site:
http://www.casadelviento.com.ar/
In this case, it´s using different body ids AND different wrappers, I thought may be it could be done with less code and more clear (i.e I don´t understand why is the difference between the wraper heigh #contenido-index and the body heigh)
#contenido-index {
background-color: #FFF;
height: 2040px;
width: 900px;
margin: 0 auto;
}
#contenido-chicos {
background-color: #FFF;
height: 2760px;
width: 900px;
margin: 0 auto;
}
#contenido-adultos {
background-color: #FFF;
height: 2810px;
width: 900px;
margin: 0 auto;
}
#contenido-somos {
background-color: #FFF;
height: 2150px;
width: 900px;
margin: 0 auto;
}
#contenido-historia {
background-color: #FFF;
height: 980px;
width: 900px;
margin: 0 auto;
}
#contenido-horarios {
background-color: #FFF;
height: 967px;
width: 900px;
margin: 0 auto;
}
#contenido-contacto {
background-color: #FFF;
height: 750px;
width: 900px;
margin: 0 auto;
}
#contenido-videos {
background-color: #FFF;
height: 820px;
width: 900px;
margin: 0 auto;
}
#contenido-fotos {
background-color: #FFF;
height: 595px;
width: 900px;
margin: 0 auto;
}
#body-index {
height: 2160px;
}
#body-somos {
height: 2070px;
}
#body-historia {
height: 1150px;
}
#body-horarios {
height: 1060px;
}
#body-chicos {
height: 2700px;
}
#body-adultos {
height: 2800px;
}
#body-videos {
height: 960px;
}
#body-fotos {
height: 740px;
}
#body-contacto {
height: 880px;
}
/*FOOTER}*/
#contenedor_pie {
height: 40px;
width: 500px;
float: left;
margin-left: 20px;
margin-top: 15px;
}

Answer 1

With Reference to http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
You can define your footer HTML as
<div id="Sticky">
<h2>Here is a Sticky Footer</h2>
<p>Test for Sticky Footer</p>
</div>
then your CSS would be like
#Sticky
{
color:#FFF;
text-shadow: 2px 2px 2px #333;
border: 2px solid orange;
position:fixed;
padding: 0 10px 0 10px;
left: 0px;
bottom: 0px;
width: 100%;
}

Answer 2

Hey you can do easily just define in your css some code as like this
Css
body{background:green;}
#wrapper {
background:red;
min-height:700px;
}
.footer {
position:fixed;
bottom:20px;
height:100px;
background:yellow;
left:0;
right:0;
}
HTML
<div id="wrapper">Wraper text </div>
<div class="footer">Sticky footer</div>
Live demo http://jsfiddle.net/6z6Uk/
​
and now adjust according to your design .