title: How do I make images scale proportionally to the resizing of a web browser window?
body: <p>My problem is as followed. When I resize my browser window the middle image drops below 2 others which are beside it.</p>
  
  <ol>
  <li>Image of it while working: <a href="http://puu.sh/6XxjR.jpg" rel="nofollow">Working website image</a></li>
  <li>Image of it when browser is made smaller: <a href="http://puu.sh/6Xxty.jpg" rel="nofollow">Broken Website Image</a></li>
  <li>The same happens with smaller monitors and my code is bellow:</li>
  </ol>
  
  <p>HTML: <a href="http://pastebin.com/DRKzYDnZ" rel="nofollow">HTML Code</a></p>
  
  <pre><code>CSS:
  
  .content {
  padding-top:50px;
  text-align: center;
  }
  .samp{
  float: left;
  width: 188px;
  height: 356px;
  margin-top: 50px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 320px;
  }
  .multiv{
  float: left;
  width: 247px;
  height: 431px;
  margin-top: 100px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 60px;
  }
  .minecraft{
  float: right;
  width: 234px;
  height: 327px;
  margin-top: 73px;
  margin-right: 280px;
  margin-bottom: 5px;
  margin-left: 0px;
  }
  </code></pre>
  
  <p>There are 3 images I just want them to stay in one place which is in the middle area and resize with the browser.</p>