title: How to place a div over another
body: <p>I am trying to put a div on top of another.</p>
  
  <p>To see what I want to achieve, check this image: <a href="https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg" rel="noreferrer">https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg</a></p>
  
  <p>I want my grey left div on top of the pink header. </p>
  
  <p>Here is my HTML so far: </p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="left"&gt;&lt;/div&gt;
  &lt;div id="right"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And my CSS: </p>
  
  <pre><code>#header {
      width: 106%; 
      background-color: #E8D5C6;
      height: 100px;
      margin-top: -8px;
      margin-left: -8px;
  }
  
  #left {
      width: 15px; 
      background-color: #919191;
      height: 400px;
      margin-left: -8px;
  }
  </code></pre>
  
  <p>This is putting my pink header on top of the grey left one, and I want it to be other way around, just like in the photo I showed you: <a href="https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg" rel="noreferrer">https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg</a></p>