title: How to stop 3 images side by side inside a div from wrapping to the next line?
body: <p>I cannot figure this out. I would like 3 images to sit side by side inside a 930px wide div.</p>
  
  <p>so, when you enter into responsive design mode, or drag the screen browser width wise to make it smaller all the 3 images stay side by side inside the div without wrapping to the next line. </p>
  
  <p>But automatically start to re-size to fit the re-sized div.</p>
  
  <p>The 3 images only start to resize correctly inside the div only when the 3rd image has wrapped under the second image. So it looks like this below. </p>
  
  <pre><code>[]
  [] 
  []
  </code></pre>
  
  <p>Once all the images are vertically aligned the images then start to shrink down correctly. But this image wrapping under the next image is no good for me, as when viewing the website on a mobile phone, or when re-sizing the screen the images are still super large.</p>
  
  <p>Must be a way to stop these images from wrapping underneath each other, and just stay inline but automatically re-size themselves
  as the div/page width shrinks down? </p>
  
  <p>I've tried white-space: nowrap; display: inline; inline-block; even display: table-cell; nothing seems
  to do what I need it to do. However, if I use only one image instead of 2, or 3 then it works perfectly fine.</p>
  
  <p>You're probably thinking why not just put all 3 images inside 1 image in photoshop? Well each img is an href link, so that's not possible.
  Even floating the images all to the left still doesn't help.  </p>
  
  <p>Here's my CSS/HTML </p>
  
  <pre><code>img {
  
  max-width: 100%;
  height: auto;
  
  }
  </code></pre>
  
  <p>then </p>
  
  <pre><code>&lt;div style="width: 930px; max-width: 100%; border: 1px solid blue;"&gt;
  &lt;img src="camera.png"&gt; &lt;img src="lights.png"&gt; &lt;img src="action.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can someone tell me where I may be going wrong please? How can I stop images wrapping underneath other images when the parent container shrinks down.</p>
  
  <p>I've had to resort to using multiple @media queries of different pre-fixed image sizes per break-point. But there's got to be a much much easier way. Something so simple that I'm missing. </p>