title: Div should be above other div, not below
body: <p>just got back into coding and I can't solve this simple problem so any help much appreciated.</p>
  
  <p>Basically the 'header-top' (red) div should be at the top, and the 'header-bottom' (blue) div should be at the bottom. However, the top div just sits below the bottom div. Why is this? I've tried float, clear and margin commands to no avail.</p>
  
  <p>thank you. code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "UTF-8";
  /* CSS Document */
  
  body{
   background-color:#ff0; 
   padding:0px;
   margin:0 auto; /* aligns content to touch the edge; gets rid of default spacing/margin between edge and content */
  }
  
  /* Header */
  #header-wrap{
   background:#0F0;
   width:100%;
   height:auto;
   border-bottom: 3px solid #CCC;
   /* margin:0 auto; needed? */
  }
  #header-top{
   /* contains logo &amp; title text */
   background:#F00;
   width:960px;
   height:200px;
   margin:0 auto; /* aligns centrally */
  }
  #header-bottom{
   /* contains navigation menu */
   background:#00F;
   width:960px;
   height:50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
  &lt;!-- Meta Tags Below --&gt;
  &lt;meta name="description" content="" /&gt;
  &lt;meta name="keywords" content="" /&gt;
  &lt;title&gt;___________________________&lt;/title&gt;
  &lt;!-- Google Analytics Code Below --&gt;
  &lt;!-- _____________________________ --&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="header-wrap"&gt;
  
  &lt;div id="header-top"&gt;
  &lt;div id="header-bottom"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>