title: How to make footer stick to bottom of wrapper with bottom margin?
body: <p>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.<br>
  I came accross the sticky footer at </p>
  
  <p><a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" rel="nofollow">http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</a></p>
  
  <p>which worked great, but all my attempts of adding margin/paddings to footer/ wrapper/ body didn´t.</p>
  
  <p>I guess it must be a pretty simple thing, but I´m not finding it. Thanks for any hints/ suggestions!</p>
  
  <p>Here´s the relevant CSS:</p>
  
  <pre><code>* 
  {
      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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wraper"&gt;
  &lt;div class="header"&gt;&lt;/div&gt;
  &lt;div class="logo"&gt;
  &lt;/div&gt;
  &lt;div class="menu_container"&gt;
  &lt;div class="main_menu"&gt;  
  &lt;ul&gt;  
  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a class="selected" &gt;Quiénes Somos&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="consultoria.html"&gt;Consultoría&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="capacitacion.html"&gt;Capacitación&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="academico.html"&gt;Académico / Artículos&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="alianzas.html"&gt;Alianzas&lt;/a&gt;&lt;/li&gt; 
  &lt;li&gt;&lt;a href="proyectos.html"&gt;Proyectos&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="contacto.html"&gt;Contacto&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;  
  &lt;/div&gt; 
  &lt;/div&gt;
  &lt;div class="quienes_pic"&gt;&lt;/div&gt;
  &lt;div class="quienes_text"&gt;&lt;/div&gt;
    &lt;div class="push"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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</p>
  
  <p>Pretty much like is done through this site:</p>
  
  <p><a href="http://www.casadelviento.com.ar/" rel="nofollow">http://www.casadelviento.com.ar/</a></p>
  
  <p>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 <code>#contenido-index</code> and the body heigh)</p>
  
  <pre><code>#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;
  }
  </code></pre>