title: Why does the footer cover up the content?
body: <p>I have a website in development here: <code>http://184.173.208.195/~secoast/about/mission</code> and it is supposed to have a "sticky footer" however, in order to get the drop shadow to show correctly on the bottom of the content I have had to modify the code slightly. In doing so the footer now comes up over the bottom of the content on long pages.</p>
  
  <p>Here is the code for the sticky footer:</p>
  
  <pre><code>/* Begin Sticky Footer code */
  html, body, #wrap       { height: 100%;}
  body &gt; #wrap            { height: auto; min-height: 100%; }
  #main                   { padding-bottom: 50px; }  /* must be same height as footer 
  */
  body.inside #main       { 
      height: 100%;
      margin-top: 5px;
      background: #fff url(../photos/bg_main.png) repeat-y;
      position: relative;
      -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
      -moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.75);
      box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.75);
      }
  
  .white-bar-top  { 
      width: 959px; 
      height: 20px; 
      margin-left: 1px;
      background: #fff; 
      margin-top: -10px; 
  }
  
  .white-bar-bottom { 
      width: 959px; 
      height: 20px; 
      clear: both;
      background: #fff;
      position: absolute; 
      bottom: 0;  
      left: 1px;
      }   
  
  #footer {
      position: relative;
      width: 100%;
      background-color: #dadfdb;
      margin-top: -50px; /* negative value of footer height */
      height: 50px;
      clear: both; 
  } 
  </code></pre>
  
  <p>Here is the html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
  &lt;!-- Meta Data --&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="author" content="SE Coastal Wind Coalition"&gt;
  
  &lt;!-- Title --&gt;
  &lt;title&gt;Mission | About Us |SE Coastal Window Coalition&lt;/title&gt;
  &lt;meta name='keywords' content='your, default, keywords, here' /&gt;
  &lt;meta name='description' content='Your default description here' /&gt;
  &lt;link rel='canonical' href='http://184.173.208.195/~secoast/about/mission' /&gt;
  &lt;!-- generated by seo_lite --&gt;
  
  &lt;!-- Styles --&gt;
  &lt;link rel="stylesheet" href="http://184.173.208.195/~secoast/css/styles.css?v=1.0"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://184.173.208.195/~secoast/fancybox/jquery.fancybox.css?v=2.0.6" media="screen" /&gt;
  
  
  &lt;!-- Scripts --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!--[if lt IE 9]&gt;
  &lt;script src="//html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  
  &lt;!-- &lt;script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"&gt;&lt;/script&gt; --&gt;
  &lt;script src="http://184.173.208.195/~secoast/js/jquery.dropmenu.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  $("#nav-one").dropmenu({
  openAnimation: "size",
  closeAnimation: "slide",
  openSpeed: 300,
  closeSpeed: 200,
  closeDelay: 500,
  zindex: 1000
  });
  });
  &lt;/script&gt;       
  
  &lt;!-- Fancybox --&gt;
  &lt;script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"&gt;&lt;/script&gt;
  
  &lt;!-- page-specific scripts --&gt;  
  &lt;/head&gt;
  
  &lt;body class="inside base-3-col"&gt;
  &lt;div id="wrap"&gt;
  
  &lt;div id="header"&gt;
  
  &lt;!-- navigation code goes here --&gt;
  
  &lt;/div&gt;&lt;!-- end #header --&gt;
  
  &lt;div id="main" class="clearfix"&gt;
  
  &lt;img class="banner" src="http://184.173.208.195/~secoast//photos/banner-inside.jpg" alt="banner-inside" width="962" height="125" /&gt;
  &lt;div id="page-title-banner"&gt;
  &lt;h2&gt;About the Southeast Coastal Wind Coalition&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div class="white-bar-top"&gt;&lt;/div&gt;
  &lt;div id="section-sub-nav"&gt;&lt;!-- this only shows on base-3-col pages --&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Nav One&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Nav Two&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Nav Three&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Nav Four&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="sidebar-nav" class="clearfix"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a class="selected" href="http://184.173.208.195/~secoast/about/mission"&gt;Mission&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a  href="http://184.173.208.195/~secoast/about/members"&gt;Members&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a  href="http://184.173.208.195/~secoast/about/management"&gt;Management&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a  href="http://184.173.208.195/~secoast/about/board-of-directors"&gt;Board of Directors&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a  href="http://184.173.208.195/~secoast/about/state-policy-liaison"&gt;State Policy Liaison&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="main-content"&gt;
  
  
  &lt;h3&gt;Our Mission&lt;/h3&gt;
  
  &lt;p&gt;
  &lt;img alt="" src="http://184.173.208.195/~secoast/images/uploads/offshoregrande.jpg" style="width: 610px; height: 440px; " /&gt;&lt;br /&gt;
  &lt;span style="font-size:9px;"&gt;&lt;span style="font-family:trebuchet ms,helvetica,sans-serif;"&gt;PHOTO: COURTESY OF SIEMENS AG @2013. ALL RIGHTS RESERVED.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;
  Page text goes here.&lt;/p&gt;
  
  &lt;/div&gt;&lt;!-- end #content-two-thirds--&gt;
  &lt;div class="white-bar-bottom" class="white-bar"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- end #main --&gt;
  &lt;/div&gt;&lt;!-- end #wrap --&gt;
  
  
  &lt;div id="footer"&gt;
  &lt;div id="footer-content"&gt;
  &lt;ul id="footer-nav"&gt;
  &lt;li class="no-icon"&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
  &lt;li class="no-icon"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="social facebook" href="#"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="social twitter" href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="social linkedin" href="#"&gt;LinkedIn&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="social youtube" href="#"&gt;Youtube&lt;/a&gt;&lt;/li&gt;
  &lt;li class="no-icon"&gt;&amp;copy;2012 Southeast Coastal Wind Coalition&lt;/li&gt;    
  &lt;li class="no-icon"&gt;&lt;a href="http://www.rouviere.com"&gt;Website by Rouviere Media&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- end #footer-content --&gt;
  &lt;/div&gt;&lt;!-- end #footer --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would appreciate any help in getting the footer to stay below the main content.</p>
  
  <p>Thanks.</p>