title: Responisve layout for a div containing 3 images intersecting
body: <p>I am trying to make the Content div responsive,
  the div is composed of two images on in the left and the other in the right,
   and in the middle of the there is an image, part of the middle image will be in the left and another part will be in the right image,</p>
  
  <p>I want when the screen resizes whole of those images to be sized accordingly,</p>
  
  <p>this is a link,
  <a href="http://syrdoccam.com/oleaotel/" rel="nofollow">http://syrdoccam.com/oleaotel/</a></p>
  
  <pre><code>    &lt;div id="wrapper"&gt;
          &lt;div class="header"&gt;
              &lt;div class="topHead"&gt;
                  &lt;div class="container clearfix"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;div style="height: 500px;"&gt;
              &lt;!--&lt;div id="pic1"&gt; &lt;/div&gt;--&gt;&lt;img src="img/pic1.png" class="pic1" &gt;
              &lt;div class="reservation"&gt;&lt;/div&gt;
          &lt;!--&lt;div id="pic2"&gt;&lt;/div&gt;--&gt;&lt;img src="img/pic2.png" class="pic2" &gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="middle"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  .content {
      border-top: 1px solid #EEF0EF;
      box-shadow: 0 -1px 2px #DFE1DF;
  
      position: relative;
      z-index: 95;
  }
  
  .reservation {
      background: url("../img/reservation.png") no-repeat scroll;
      float: left;
      height: 74%;
      left: 33%;
      position: absolute;
      top: 26%;
      width: 52%;
      background-size: 100%;
  }
  </code></pre>
  
  <p>what can I do?</p>