title: HTML div is ignoring div for margin-bottom
body: <p>This is kinda confusing to explain but I'll give it a shot. Basically, I have 3 'main' divs on one page. The first is the navbar, the second is a search box and the third is a content box.</p>
  
  <p>I want them to be one under the other, so navbar > search box > content box. The problem I have is that when I set <code>margin-top: 10px;</code> to the content box it goes directly underneath the navigation bar and not the search box. It seems to be ignoring the search box and I can't for the life of work out why. I'm pretty new to all this so please bear with me if this is a newbie mistake.</p>
  
  <p>Thank you!</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="navbar"&gt;
          &lt;img class="navbar" src="images/homebutton.png" /&gt;
          &lt;img class="navbar" src="images/e-3button.png" /&gt;
          &lt;img class="navbar" src="images/resignedbutton.png" /&gt;
          &lt;img class="navbar" src="images/firedbutton.png" /&gt;
          &lt;img class="navbar" src="images/desertersbutton.png" /&gt;
          &lt;img class="navbar" src="images/mosrosterbutton.png" /&gt;
          &lt;img src="images/divider.png" /&gt;
          &lt;p&gt;&lt;script language="JavaScript"&gt;dT();&lt;/script&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="search"&gt;
      &lt;img src="images/logo.png" /&gt;
          &lt;b&gt;&lt;p&gt;Search&lt;/p&gt;&lt;/b&gt;
          &lt;form action="" id="search_habbo"&gt;            
              &lt;input type="text" name="habbo_name" id="habbo_name" size="30" required&gt;
              &lt;br&gt;
              &lt;input type="submit" value="Search" name="send" id="send"&gt;
          &lt;/form&gt;
      &lt;div id="search_results"&gt;
          &lt;div id="loadingimage"&gt;
              &lt;img src="images/ajax-loader.gif" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  
  #navbar {
      background: url(images/navbarbg.png);
      width: 100%;
      height: 55px;
      line-height: 20px;
      margin: 0;
      white-space: nowrap;
      display: inline-block;
  }
  
  #search {
      display: block;
      width: 920px;
      height: auto;
      background: #fff;
      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
      padding: 5px;
      position: absolute;
      top: 65px;
      left: 50%;
      margin-left: -462px;
      border-top-left-radius: 5px 5px;
      border-top-right-radius: 5px 5px;
      border-bottom-left-radius: 5px 5px;
      border-bottom-right-radius: 5px 5px;
      -moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
      -webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
      box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
  }
  
  
  
   #content {
          width: 920px;
          height: auto;
          margin-top: 10px;
          background: #fff;
          font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
          padding: 5px;
          position: absolute;
          left: 50%;
          margin-left: -462px;
          border-top-left-radius: 5px 5px;
          border-top-right-radius: 5px 5px;
          border-bottom-left-radius: 5px 5px;
          border-bottom-right-radius: 5px 5px;
          -moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
          -webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
          box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
      }
  </code></pre>