title: How to remove the space under footer?
body: <p>Please help!</p>
  
  <p>I tried many tricks to remove the white space under my footer but none of them solved my problem. I noticed that the white space is only visible in the pages with <em>text, p and h1</em> tags. Any help is highly appreciated. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Olive Green Studio&lt;/title&gt;
  &lt;link href="oliva.css" rel="stylesheet" type="text/css" /&gt;
  &lt;!—[if lt IE 7]&gt;
    &lt;link rel="stylesheet" type="text/css" href="ie6.css" /&gt;
  &lt;![endif]—&gt;
  &lt;!--[if IE 5]&gt;
  &lt;style type="text/css"&gt; 
  /* place css box model fixes for IE 5* in this conditional comment */
  .twoColFixLtHdr #sidebar1 { width: 230px; }
  &lt;/style&gt;
  &lt;![endif]--&gt;&lt;!--[if IE]&gt;
  &lt;style type="text/css"&gt; 
  /* place css fixes for all versions of IE in this conditional comment */
  .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
  .twoColFixLtHdr #mainContent { zoom: 1; }
  /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
  &lt;/style&gt;
  &lt;![endif]--&gt;&lt;/head&gt;
  
  &lt;body class="twoColFixLtHdr"&gt;
  
  &lt;div id="container"&gt;
    &lt;div id="header"&gt;&lt;!-- end #header --&gt;
      &lt;div id="logo"&gt;
      &lt;a href="index.html"&gt;
      &lt;img src="olivaimages/olivegreenlogoweb.png" border="none"/&gt;
      &lt;/a&gt;
    &lt;/div&gt;
     &lt;div id="sidebar1"&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 href="work.html"&gt;Work&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
    &lt;!-- end #sidebar1 --&gt;&lt;/div&gt;
  
  
    &lt;/div&gt;
    &lt;div id="mainContent"&gt;
  &lt;h1&gt;Contact Us &lt;/h1&gt;
  &lt;p&gt;If you need a creative help or want to take your project to the next level please don't hesitate to drop us a line.&lt;/p&gt;
  &lt;a class="worklinks" href= "mailto:info@olivegreenstudio.com"&gt; info@olivegreenstudio.com&lt;/a&gt;   
    &lt;!-- end #mainContent --&gt;&lt;/div&gt;
      &lt;!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --&gt;&lt;br class="clearfloat" /&gt;
     &lt;div class="clearfooter"&gt;&lt;/div&gt;
  
    &lt;!-- end #container --&gt;
  &lt;/div&gt;
  
            &lt;div id="footerframe"&gt;
  &lt;div id="footer"&gt;
              &lt;div id="footer2"&gt;
              &lt;div id="address"&gt;Khobar&lt;br&gt; Saudi Arabia &lt;/div&gt;
              &lt;div id="contact"&gt;
              &lt;strong&gt;Services:&lt;/strong&gt;&lt;br&gt; Logos&lt;br&gt;Branding&lt;br&gt;Identity&lt;br&gt;Collaterals&lt;br&gt;Packaging&lt;br&gt; Web Design &amp; Development &lt;br&gt;
             &lt;/div&gt;
            &lt;div id="email"&gt;
              If you have a project inquiry, we will be happy to answer you &lt;a class="contactlink" href="mailto:info@olivegreenstudio.com"&gt; here.&lt;/a&gt;
   &lt;/div&gt;
  
  &lt;div class="social"&gt;
              &lt;div class="twitter"&gt;
              &lt;a href="https://twitter.com/OliveGreenSTU" /&gt;
              &lt;img src="olivaimages/twitterbirdwebgreen.png" onmouseover="this.src='olivaimages/twitterbirdweb-lightgreen.png'" onmouseout="this.src='olivaimages/twitterbirdwebgreen.png'" /&gt;
              &lt;/div&gt;
              &lt;/a&gt;
  
                 &lt;div id="pinterest"&gt;
                 &lt;a href="http://pinterest.com/olivegreenstu/"&gt;
                 &lt;img src="olivaimages/pinterestwebgreen.png" onmouseover="this.src='olivaimages/pinterestweb-lightgreen.png'"   
  onmouseout="this.src='olivaimages/pinterestwebgreen.png'" /&gt;
     &lt;/a&gt;
               &lt;/div&gt;
       &lt;div class="copywrite"&gt; © 2013 Olive Green. All rights reserved.&lt;/div&gt; 
    &lt;/div&gt;   
  
  &lt;/div&gt;
       &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>  @charset "UTF-8";
      body  {
          margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
          padding: 0;
          text-align: center;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 100%;
          background-color: #FFFFFF;
          height: 100%;
      }
      .twoColFixLtHdr #header {
          height: 170px;
          background-color: #FFFFFF;
          background-repeat: no-repeat;
          background-position: center center;
          margin: 0px;
          padding: 0;
      } 
      h1 {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 18px;
          color: #5A6219;
          text-decoration: none;
          font-style: normal;
          font-weight: normal;
          padding-bottom: 20px;
      }
      h2 {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 16px;
          font-style: normal;
          font-weight: normal;
          color: #908B23;
          text-decoration: none;
          line-height: 1.5em;
          margin-bottom: 30px;
      }
      p {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 14px;
          font-style: normal;
          line-height: 1.5em;
          font-weight: normal;
          color: #908B23;
          text-decoration: none;
          margin: 0px;
      }
      .twoColFixLtHdr #container {
          width: 900px;
          text-align: left; /* this overrides the text-align: center on the body element. */
          min-height: 100%;
          margin-top: 0;
          margin-right: auto;
          margin-left: auto;
          position: relative;
          margin-bottom: -215px;
          height: 100%;
      } 
      .twoColFixLtHdr #mainContent {
          height: 100%;
          background-color: #FFF;
          float: left;
          width: 100%;
          border-top-width: 1px;
          border-top-style: solid;
          border-top-color: #CCC;
          padding-top: 50px;
          padding-bottom: 70px;
      } 
      .workmaincontent {
          height: 100%;
          background-color: #FFF;
          float: left;
          width: 100%;
          border-top-width: 1px;
          border-top-style: solid;
          border-top-color: #CCC;
          padding-top: 50px;
          padding-bottom: 70px;
      }
      .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
      }
      .fltlft { /* this class can be used to float an element left in your page */
          float: left;
          margin-right: 8px;
      }
      .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
      }
      .twoColFixLtHdr #sidebar1 {
          float: right; /* since this element is floated, a width must be given */
          width: 300px;
          padding-top: 10px;
          padding-right: 10px;
          padding-bottom: 15px;
          padding-left: 20px;
          margin-top: 70px;
          background-color: #FFFFFF;
          height: 30px;
      }
  
      #sidebar1 {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          height: 200px;
          line-height: 1.5em;
          text-decoration: none;
          padding-right: 10px;
          padding-bottom: 10px;
          padding-left: 10px;
          width: 500px;
      }
      #sidebar1 ul {
          background-color: #FFFFFF;
          list-style-type: none;
          margin: 0px;
          padding: 0px;
      }
  
      #sidebar1 li {
          display: run-in;
          list-style-type: none;
      }
      #sidebar1 a {
          display: run-in;
          text-decoration: none;
          color: #918C10;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 14px;
          font-style: normal;
          font-weight: normal;
          padding: 5px;
          float: left;
          width: 65px;
      }
      #sidebar1 a:hover {
          color: #5A6219;
      }
  
      .worklinks{
          font-family: Arial, Helvetica, sans-serif;
          color: #5A6219;
          text-decoration: none;
  
      }
  
      .worklinks:hover{
          font-family: Arial, Helvetica, sans-serif;
          color: #908B23;
          text-decoration: none;
      }
      #print{
          height: 100%;
          background-color: #FFF;
          width: 730px;
          float: left;
          padding-right: 15px;
          padding-left: 15px;
          margin-left: 85px;
          margin-right: 85px;
      }
  
      #web{
          height: 100%;
          background-color: #FFF;
          width: 730px;
          float: left;
          padding-right: 15px;
          padding-left: 15px;
          margin-left: 85px;
          margin-top: 50px;
          margin-bottom: 50px;
      }
      #packaging{
          background-color: #FFF;
          height: 100%;
          width: 730px;
          float: left;
          padding-right: 15px;
          padding-left: 15px;
          margin-left: 85px;
      }
      .imagetitles a {
          text-decoration: none;
          font-family: "Century Gothic";
          font-size: 25px;
          font-style: normal;
          font-weight: normal;
          color: #00CCCC;
      }
      #printtitle{
          bottom: -5px;
          left: 333px;
      }
      #webtitle{
          position: absolute;
          left: 333px;
          top: 521px;
      }
      #packagingtitle{
          position: absolute;
          left: 317px;
          top: 823px;
          width: 89px;
      }
  
      #bigimages{
          width: 570px;
          height: 100%;
      }
      .imagestalk {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-style: normal;
          font-weight: normal;
          color: #666666;
          text-decoration: none;
          font-size: 14px;
          line-height: 1.5em;
          padding-top: 5px;
          padding-right: 15px;
          padding-bottom: 10px;
          padding-left: 20px;
      }
  
  
      .thumbnails {
          border: 5px solid #666666;
      }
      h3 {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 14px;
          font-style: normal;
          line-height: 1.5em;
          font-weight: normal;
          color: #5A6219;
          text-decoration: none;
      }
  
  
      h3 a:link {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #000000;
          font-style: normal;
          font-weight: normal;
          text-decoration: none;
      }
      h3 a:visited {
          color: #D0BA0B;
          text-decoration: underline;
      }
      h3 a:hover {
          color: #5A6219;
      }
      h3 a:active {
          color: #579835;
      }
  
      .back{
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 14px;
          font-style: normal;
          font-weight: normal;
          color: #666666;
          text-decoration: none;
          padding-left: 520px;
      }
      .back a:link {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          text-decoration: none;
          font-size: 14px;
          font-style: normal;
          font-weight: normal;
          color: #666666;
      }
      .back a:visited {
          color: #666666;
          text-decoration: none;
      }
      .back a:hover {
          color: #000000;
          text-decoration: none;
      }
      .back a:active {
          color: #333333;
          text-decoration: none;
      }
  
      .source{
          font-size: 15px;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-style: normal;
          font-weight: normal;
          color: #666666;
          text-decoration: none;
      }
      .workimage {
          height: 150px;
          width: 200px;
          float: left;
          margin: 20px;
      }
  
      img {
      border: 0;
      }
  
      #logo {
          height: 150px;
          width: 300px;
          float: left;
      }
      #footerframe {
          width: 100%;
          background-color: #AEA03A;
          height: 215px;
          position: relative;
          float: right;
      }
      #footer {
          width: 900px;
          font-family: Verdana, Arial, Helvetica;
          font-size: 11px;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-decoration: none;
          margin-right: auto;
          margin-left: auto;
          background-color: #AEA03A;
          float: none;
          position: relative;
          height: 215px;
      } 
  
      #footer2 {
          width: 100%;
          background-color: #AEA03A;
          padding-top: 30px;
          float: left;
          position: relative;
      }
  
      #address {
          height: 50px;
          width: 180px;
          background-color: #AEA03A;
          float: left;
          text-align: left;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          text-decoration: none;
          color: #5A6219;
          line-height: 1.5em;
      }
  
      #contact {
          height: 130px;
          width: 180px;
          background-color: #AEA03A;
          float: left;
          text-align: left;
          margin-right: 180px;
          margin-left: 180px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #5A6219;
          text-decoration: none;
          line-height: 18px;
      }
  
      #email {
          background-color: #AEA03A;
          height: 50px;
          width: 180px;
          float: right;
          text-align: left;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #5A6219;
          text-decoration: none;
      }
  
      .social {
          background-color: #AEA03A;
          height: 35px;
          width: 100%;
          float: right;
          margin-top: 20px;
      }
      #pinterest {
          height: 20px;
          width: 20px;
          float: left;
          background-repeat: no-repeat;
          margin-left: 15px;
          margin-bottom: 15px;
      }
  
  
  
      .twitter {
          height: 20px;
          width: 20px;
          background-repeat: no-repeat;
          float: left;
          margin-bottom: 15px;
      }
  
  
      .copywrite {
          font-size: 11px;
          font-weight: lighter;
          text-decoration: none;
          font-family: Arial, Helvetica, sans-serif;
          text-align: right;
          width: 300px;
          background-color: #AEA03A;
          float: right;
          height: 15px;
          color: #5A6219;
          vertical-align: middle;
          margin-bottom: 10px;
          margin-top: 5px;
      }
  
      .contactlink {
          font-family: Arial, Helvetica, sans-serif;
          color: #5A6219;
          text-decoration: none;
      }
  
      .contactlink a {
          font-family: Arial, Helvetica, sans-serif;
          color: #5A6219;
          text-decoration: none;
      }
  
  
      .contactlink:hover {
          font-family: Arial, Helvetica, sans-serif;
          color: #FFFFFF;
          text-decoration: none;
      }
  
      h4 {
          color: #5A6219;
      }
  
  
      .indeximg {
          height: 100px;
          width: 900px;
          background-repeat: no-repeat;
          background-position: center top;
          background-image: url(../olivaimages/indeximg.png)
      }
      .indexwrap {
          height: 100%;
          width: 810px;
          padding-left: 90px;
      }
  
      #wrapper {
          min-height: 100%;
      }
  
  
  
      .clearfooter {
          height: 215px;
          clear: both;
      }
  </code></pre>