title: How do I make a row of 5 <divs> responsive using percentage widths?
body: <p>I have created a widget consisting of a row of five floating <code>div</code>s, each containing an image. Here's a stripped-down version of the HTML:</p>
  
  <pre><code>&lt;div class="panel"&gt;
    &lt;img src="/images/image.jpg" height="160" width="160"&gt;
  &lt;/div&gt;
  &lt;div class="panel"&gt;
    &lt;img src="/images/image.jpg" height="160" width="160"&gt;
  &lt;/div&gt;
  &lt;div class="panel"&gt;
    &lt;img src="/images/image.jpg" height="160" width="160"&gt;
  &lt;/div&gt;
  &lt;div class="panel"&gt;
    &lt;img src="/images/image.jpg" height="160" width="160"&gt;
  &lt;/div&gt;
  &lt;div class="panel"&gt;
    &lt;img src="/images/image.jpg" height="160" width="160"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's a stripped-down version of the CSS:</p>
  
  <pre><code>.panel {
  display: inline-block;
  float: left;
  height: 160px;
  position: relative;
  margin: 8px 25px 0 0;
  width: 160px;
  }
  </code></pre>
  
  <p>The five <code>div</code>s are in a container (original width of 940px - changes to <code>width: auto</code> when the screen width is reduced below 940px) with a left and right padding (20px each side).</p>
  
  <p>I have used media queries to create a responsive stylesheet but I now want to make the floating <code>div</code>s fit to the screen as the width is reduced.</p>
  
  <p>Does anyone know how I could do this, please?</p>