title: HTML CSS Content div won't float over
body: <p>I am trying to place the content div over both background divs but instead my code sets it only on the bottom div. Below there are 2 images that show you what I want to achieve and what is happening.</p>
  
  <p>Image 1: What I want to achieve
  <img src="https://i.stack.imgur.com/y7eCB.png" alt="Goal"></p>
  
  <p>Image 2: The problem
  <img src="https://i.stack.imgur.com/jkKwV.png" alt="The problem"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="middle"&gt;
  &lt;div class="middle_bot"&gt;
  
  
      &lt;div id="content"&gt;
          &lt;p class="big"&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Curabitur tellus felis, sagittis at neque placerat, 
          laoreet mollis massa. Sed et purus mollis, fringilla 
          tellus et, tincidunt eros. Ut dolor ipsum, feugiat et 
  
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.middle
  {
  
  background-image: url(images/bg_middle.png); /* fallback */
  background-image: url(images/bg_middle.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#009dca)); /* Saf4+, Chrome */
  background-image: url(images/bg_middle.png), -webkit-linear-gradient(top, #000000, #009dca); /* Chrome 10+, Saf5.1+ */
  background-image: url(images/bg_middle.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
  background-image: url(images/bg_middle.png),     -ms-linear-gradient(top, #000000, #009dca); /* IE10 */
  background-image: url(images/bg_middle.png),      -o-linear-gradient(top, #000000, #009dca); /* Opera 11.10+ */
  background-image: url(images/bg_middle.png),         linear-gradient(to bottom, #000000, #009dca); /* W3C */
  
      /*background-color:blue;
      background-repeat: repeat;
      background: url(images/bg_middle.png);*/
      height: 40%;
      width: 100%;
  }
  
  .middle_bot
  {
  
  background-image: url(images/bg_middle2.png); /* fallback */
  background-image: url(images/bg_middle2.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff)); /* Saf4+, Chrome */
  background-image: url(images/bg_middle2.png), -webkit-linear-gradient(top, #000000, #ffffff); /* Chrome 10+, Saf5.1+ */
  background-image: url(images/bg_middle2.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
  background-image: url(images/bg_middle2.png),     -ms-linear-gradient(top, #000000, #ffffff); /* IE10 */
  background-image: url(images/bg_middle2.png),      -o-linear-gradient(top, #000000, #ffffff); /* Opera 11.10+ */
  background-image: url(images/bg_middle2.png),         linear-gradient(to bottom, #000000, #ffffff); /* W3C */
  
      /*background-color:blue;
      background-repeat: repeat;
      background: url(images/bg_middle2.png);*/
      height: 50%;
      bottom:0;
      position:absolute;
      width: 100%;
  }
  
  #content
  {
      background: url(images/content2.png);
      width: 800px;
      padding: 10px;
      border: 1px solid #373737;
      margin: 0;
      word-wrap: break-word;
      margin-left: auto ;
      margin-right: auto ;
      box-shadow: 2px 2px 2px #000000;
  }
  </code></pre>