title: Why Is my div going under another element when I give It a negative margin
body: <p>So I have a div <code>(.section-page-layout)</code> with a margin of <code>(margin-top:-200px)</code> and the div <code>(.section-page-layout)</code> is going under the div <code>(.section-page-header)</code> where it should be going over it. I uploaded the code to a demo link where you can fiew it with Firebug or whatnot. I have also included my code.</p>
  
  <p><a href="http://kmgp.us/stackoverflow/section_page_template.html" rel="nofollow">http://kmgp.us/stackoverflow/section_page_template.html</a></p>
  
  <p>Thanks in advance!</p>
  
  <p>CSS CODE</p>
  
  <pre><code>/* Header */
  .section-page-header {
      background: url("../img/frontcover.jpg") no-repeat;
      background-size: cover;
      width: auto;
      height: auto;
      min-height: 727px;
      min-width: 1280px;
  }
  .section-page-header-title_container {
      width: 1280px;
      position: relative;
      margin: 0 auto;
  }
  .section-page-header-title {
      margin-top: 83px;
      border-top: 7px #5b461c solid;
      width: 1170px;
      float: left;
      height: 167px;
      background: #000000;
      -webkit-border-radius: 0px 0px 50px 0px;
      border-radius: 0px 0px 50px 0px;
      /* IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
      /* IE 5-7 */
      filter: alpha(opacity=90);
      /* Gecko */
      -moz-opacity: 0.9;
      /* Safari 1.x */
      -khtml-opacity: 0.9;
      /* CSS3 */
      opacity: 0.9;
  }
  .section-page-header-title h1 {
      font-family: 'QuicksandBook';
      margin-left: 147px;
      margin-top: 46px;
      font-size: 50px;
      color: #FFFFFF;
      text-transform: uppercase;
  }
  .section-page-header-title p {
      margin-top: 12px;
      margin-left: 147px;
      font-family: 'junctionregularRegular';
      color: #ff9900;
      text-transform: uppercase;
  }
  .section-page-layout-container {
      background:#984B09;
      background: url('../img/section-page-oj_gradient-background.png') repeat-y;
      background-size:contain;
      width: 100%;
      overflow: hidden;
  }
  .section-page-layout {
      width: 1280px;
      position: relative;
      margin: 0 auto;
      height: auto;
      overflow: visible;
      margin-top:-200px;
  }
  .left-section-container {
      width: 585px;
      height: 500px;
      background: #FFFFFF;
      float: left;
  }
  </code></pre>
  
  <p>HTML CODE</p>
  
  <pre><code>&lt;!-- ===============
  === Section Page Template
  =============== --&gt;
  &lt;header class="section-page-header"&gt;
      &lt;div class="section-page-header-title_container"&gt;
          &lt;div class="section-page-header-title"&gt;
              &lt;h1&gt;ABOUT &lt;b&gt;US&lt;/b&gt;&lt;/h1&gt;
              &lt;p&gt;A simple glance into our company&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;section class="section-page-layout-container"&gt;
      &lt;div class="section-page-layout"&gt;
          &lt;div class="left-section-container"&gt;
              &lt;header&gt; &lt;/header&gt;
              &lt;div class="left-section"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="right-module-section"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;div class="clear"&gt;&lt;!-- Clear --&gt;&lt;/div&gt;
  </code></pre>