title: Removing white space between main content and a sticky footer
body: <p>I'm using a sticky footer and it keeps being pushed down past the browser height, causing a large amount of whitespace to appear between my main content and the footer. When I use Firefox's inspect element tool however it appears exactly how I want it, removing the white space.</p>
  
  <p>I also have a jQuery slider I'm using called nivoslider but I don't think that's having any affect on it.</p>
  
  <p>Any suggestions?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;script src="js/jquery-1.10.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;title&gt;Page Title&lt;/title&gt;
  
      &lt;link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"&gt;
      &lt;link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen"&gt;
  
      &lt;script src="js/jquery.nivo.slider.pack.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
      &lt;script type="text/javascript"&gt;
          $(window).load(function() {
              $('#slider').nivoSlider({
                  effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
                  animSpeed: 400, // Slide transition speed
                  pauseTime: 5000, // How long each slide will show
                  startSlide: 0, // Set starting Slide (0 index)
                  directionNav: true, // Next &amp; Prev navigation
                  controlNav: false, // 1,2,3... navigation
                  controlNavThumbs: false, // Use thumbnails for Control Nav
                  pauseOnHover: false, // Stop animation while hovering
                  manualAdvance: false, // Force manual transitions
                  prevText: 'Last', // Prev directionNav text
                  nextText: 'Next', // Next directionNav text
              });
          });
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="header"&gt;
  
          &lt;div class ="title"&gt;
              &lt;a href="#"&gt;&lt;img src="res/title.png" id="title-img" alt=" "&gt;&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="navbar"&gt;
              &lt;div class="navbar_inner"&gt;
                  &lt;ul&gt;
                     &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; 
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
      &lt;div id="wrapper"&gt;
  
          &lt;div id="content"&gt;
  
  
              &lt;div id="column-left" class="column"&gt;
                  &lt;p&gt;text text text text text text TEXT&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="C-wrapper"&gt;
  
                  &lt;div id="column-right" class="column"&gt;
                       &lt;p&gt;text text text text text text TEXT&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="slider-wrapper"&gt;
  
                      &lt;div id="slider" class="nivoSlider"&gt;
                          &lt;a href="#"&gt;&lt;img src="res/slider/slider-img1.jpg" alt="LAN" title="#caption1" data-transition="" /&gt;&lt;/a&gt;
                          &lt;a href="#"&gt;&lt;img src="res/slider/slider-img2.jpg" alt="LOL" title="#caption2" data-transition="" /&gt;&lt;/a&gt;
                          &lt;a href="#"&gt;&lt;img src="res/slider/slider-img3.jpg" alt="Starcraft" title="#caption3" data-transition="" /&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div id="caption1" class="nivo-html-caption"&gt;
                      &lt;h3&gt;Title&lt;/h3&gt;
                      &lt;p&gt;text text text text&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="caption2" class="nivo-html-caption"&gt;
                      &lt;h3&gt;Title&lt;/h3&gt;
                      &lt;p&gt;text text text text text&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="caption3" class="nivo-html-caption"&gt;
                      &lt;h3&gt;Title&lt;/h3&gt;
                      &lt;p&gt;text text text text text&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="column-center"&gt;
                      &lt;p&gt;text text text text text text TEXT&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="push"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
  
      &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*{
  margin:0;
  padding:0;
  text-decoration:none;   
  }
  
  html{
  height: 100%;
  }
  
  body{
  height: 100%;
  min-height: 100%;
  background:#1010bf url(../res/bg/bg-hex.png);   
  }
  
  #header{
  margin: 0 auto;
  width: 100%
  margin-top: 10px;   
  }
  
  .title{
  margin: 0 auto 0 auto;
  position: relative;
  width: 50%;
  }
  
  .navbar{
  margin-top: 20px;
  margin-bottom: 35px;
  padding-top: 10px;
  position: relative;
  min-height: 30px;
  width: 100%;
  background: #525454;
  float: left;
  border-top-color: #000;
  border-top-width: 5px;
  border-top-style: solid;
  border-bottom-color: #000;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  }
  
  .navbar_inner{
  margin: 0 auto;
  width: 50%;
  }
  
  .navbar .navbar_inner ul li{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  padding: 10px 40px;
  display: inline;    
  }
  
  .navbar a:link{
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  color: #059695;
  }
  
  .navbar a:visited{
  color: #059695;
  text-decoration: none;
  font-weight: bold;
  }
  
  .navbar a:active{
  text-decoration: none;
  font-weight: bold;
  }
  
  .navbar a:hover{
  text-decoration: none;
  font-weight: bold;
  color: #00f7ff;
  }
  
  .navbar a:focus{
  text-decoration: none;
  font-weight: bold;
  padding: 40px 40px;
  color: #00f7ff;
  }
  
  
  #wrapper{
  margin: 0 auto -75px auto;
  width:1100px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  }
  
  #content{
  margin: 0 auto 0 auto;
  clear: both;
  }
  
  .column{
  background-color: #fff;
  width: 250px;
  height: 500px;
  }
  
  #column-left{
  float: left;
  }
  
  #column-right{
  float: right;
  }
  
  #column-center{
  margin: 10px 30px;
  float: left;
  width: 540px;
  height: 240px;
  background-color: #fff; 
  }
  
  .C-wrapper{
  clear: right;
  position: relative;
  }
  
  .slider-wrapper{
  margin: 0 auto;
  width: 540px;
  border-style: solid;
  border-color: #000;
  border-width: 5px;
  }
  
  .footer{
  background-color: #525454;
  border-top-color: #000;
  border-top-width: 5px;
  border-top-style: solid;    
  }
  
  .footer, .push{
  clear: both;
  height: 70px;
  }
  </code></pre>