title: Scale down overlapping image with Foundation
body: <p>My css skills are limited so I hope someone can help me with this...</p>
  
  <p>I am using Foundation and I have 2 divs with 2 images.The left div overlaps the right div. When the browser is resized, the left image loses it's original position.</p>
  
  <p>This is what <a href="http://imgur.com/gZjvvsp" rel="nofollow">the site looks like</a> when the browser is expanded.</p>
  
  <p>And this is what happens when <a href="http://imgur.com/qmkA8Bf" rel="nofollow">I resize the browser. </a></p>
  
  <p>This is the code that I currently have on the left image (wireframe image)</p>
  
  <pre><code>.wireframe-img {
      display: block;
      float: left;
      margin-top: 50px;
      max-width: 815px;
      overflow: hidden;
      padding-left: 50px;
      position: absolute;
      width: 100%;
      z-index: 1
  
  }
  </code></pre>
  
  <p>And the image on the right (ipad) is in a div with this code:</p>
  
  <pre><code>.small-7 {
      position: relative;
      width: 58.3333%;
  }
  .column, .columns {
      float: left;
      padding-left: 0.9375em;
      padding-right: 0.9375em;
  }
  .right {
      float: right !important;
  }
  </code></pre>
  
  <p>I basically want the "wireframe" image to scale down and not lose it's original position when the browser is resized.</p>