title: Layout Pushing Div Down
body: <p>I'm having an issue where my layout is pushing a div lower than expected. It's a fixed three row layout, but the second row seems to be pushed down. Fiddle and code below.</p>
  
  <p><a href="http://jsfiddle.net/76wfg/" rel="nofollow">fiddle</a></p>
  
  <p>CSS</p>
  
  <pre><code>body, html{
      margin:0px;
      padding:0px;
      width:100%;
      height:100%;
      background-color:black;
  }
  #wrapper{
      width:100%;
      height:100%;
      padding:0px;
      margin:0px;
      background-color:black;
      min-width:1050px;
  }
  #navbar{
      width:100%;
      height:30px;
      background-color:#333333;
      padding:0px;
      margin:0px;
      font-size:0px;
  }
  #content{
      width:100%;
      padding:0px;
      margin:0px;
      text-align:center;
  }
  #contentwrapper{
      width:1000px;
      padding:0px;
      margin:0px;
      text-align:center;
      display:inline-block;
      background-color:white;
      border: 5px solid #333333;
  }
  #contentbottom{
      text-align:center;
      margin:0px;
      padding:0px;
      top:10px;
      position:relative;
  }
  #contenttopimg{
      float:left;
  }
  #contenttoptxt{
      font-size:large;
      font-weight:bold;
      text-align:left;
  }
  .navtab{
      height:20px;
      background-color:#12c5f0;
      font-weight:bold;
      text-align:center;
      display:inline-block;
      padding:3px;
      margin:0px;
      border:2px solid black;
      font-size:medium;
  }
  .navtab:hover{
      background-color:#213655;
      cursor:pointer;
  }
  .navtab a{
      text-decoration:none;
      color:black;
  }
  
  #contactwrapper{
      padding:10px;
      margin:0px;
      background-color:#333333;
      font-size:0px;
      text-align:center;
  }
  .contacttitle{
      font-weight:bold;
      font-size:large;
      text-align:left;
      text-decoration:underline;
  }
  .contactdiv{
      background-color:white;
      border:2px solid black;
      width:300px;
      height:200px;
      display:inline-block;
      margin:3px;
  }
  .contactimgdiv{
      width:300px;
      height:200px;
      display:inline-block;
      margin:3px;
  }
  .contactimg{
      height:200px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;End Slavery in Charlotte&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="./css/index.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="navbar"&gt; 
              &lt;div id="homenav" class="navtab"&gt;
                  &lt;a href="./index.html" &gt;Home&lt;/a&gt;
              &lt;/div&gt;      
              &lt;div id="contactnav" class="navtab"&gt;
                  &lt;a href="./contactus.html" &gt;Contact Us&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="content"&gt;
              &lt;div id="contentwrapper"&gt;
                  &lt;div id="contactwrapper"&gt;
                      &lt;div id="contacttop"&gt;
                          &lt;div id="agencies" class="contactdiv"&gt;
                              &lt;div id="agenciestitle" class="contacttitle"&gt;
                                  Agencies
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="volunteers" class="contactdiv"&gt;
                              &lt;div id="volunteerstitle" class="contacttitle"&gt;
                                  Volunteers
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="groups" class="contactdiv"&gt;
                              &lt;div id="groupstitle" class="contacttitle"&gt;
                                  Groups
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div id="contactbottom"&gt;
                          &lt;div id="contactimgleft" class="contactimgdiv"&gt;
                              &lt;img src="./images/mainimg.jpg" class="contactimg" /&gt;
                          &lt;/div&gt;
                          &lt;div id="churches" class="contactdiv"&gt;
                              &lt;div id="churchestitle" class="contacttitle"&gt;
                                  Churches
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="contactimgright" class="contactimgdiv"&gt;
                              &lt;img src="./images/mainimg.jpg" class="contactimg" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div id="contactbottom"&gt;
                          &lt;div id="schools" class="contactdiv"&gt;
                              &lt;div id="schoolstitle" class="contacttitle"&gt;
                                  Schools
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="churches" class="contactdiv"&gt;
                              &lt;div id="churchestitle" class="contacttitle"&gt;
                                  Churches
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="societies" class="contactdiv"&gt;
                              &lt;div id="societiestitle" class="contacttitle"&gt;
                                  Societies
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>