title: CSS have div over top of another div?
body: <p>I am not sure how to ask my question. If you go to this site: <a href="http://powellgroupconstruction.com/" rel="nofollow noreferrer">http://powellgroupconstruction.com/</a> I am trying to get the bottom of my content class to go over top my footer, like in this example image. <img src="https://i.stack.imgur.com/Zdm5c.jpg" alt="enter image description here"></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
      &lt;div class="content"&gt;
  
      &lt;/div&gt;&lt;!--content--&gt;
  
  &lt;/div&gt;&lt;!--wrapper--&gt;
  
  &lt;div class="footer"&gt;
  
  
  &lt;/div&gt;&lt;!--footer--&gt;
  </code></pre>
  
  <p>and my CSS</p>
  
  <pre><code>.wrapper{
      background-color:#FFF;
  }
  
  .content{
  
      background-color:#FFF;
      width:1027px;
      min-height:300px;
      margin:0 auto;
      box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
      border-bottom-left-radius:2em;
      border-bottom-right-radius:2em;
  }
  
  .footer{
      background-color:#000;
      height:500px;
  }
  </code></pre>
  
  <p>Any help would be much appreciated.</p>