title: Images not responsive although in responsive container
body: <p>I have the following:</p>
  
  <pre><code>&lt;div id="hp_imgs"&gt;
      &lt;img src="/images/hp/1.jpg"&gt;
      &lt;img src="/images/hp/2.jpg"&gt;
      &lt;img src="/images/hp/3.jpg"&gt;
      &lt;img src="/images/hp/4.jpg"&gt;
      &lt;img src="/images/hp/5.jpg"&gt;
      &lt;img src="/images/hp/6.jpg"&gt;
      &lt;img src="/images/hp/7.jpg"&gt;
      &lt;img src="/images/hp/8.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The images were sized when created to form a grid of sorts, so need to be in the order where they are.</p>
  
  <p>Consequently, when/if the page is resized I want the images to resize and stay where they are.</p>
  
  <p>Here's what I'm trying but images are simply staying the same size and not resizing:</p>
  
  <pre><code>#hp_imgs {
      width:66%;
      float:left;
  }
  
  #hp_imgs img {
      float:left;
      margin:2px;
      border-radius:4px;
      display: block;
      max-width:100%;
      height:100%;
  }
  </code></pre>
  
  <p>Is there a better/different way to achieve this?</p>
  
  <p><strong>FIDDLE</strong></p>
  
  <p>Here's a sample to play with: <a href="http://jsfiddle.net/darrensw/C8gYC/" rel="nofollow">Fiddle</a></p>
  
  <p><strong>JSBin</strong></p>
  
  <p><a href="http://jsbin.com/ilavum/1/edit" rel="nofollow">JSBin</a></p>