title: How to get row of floated images inside a div element to resize with browser window
body: <p>I have been unable to figure out how to get four images inside a div to resize when the browser window is resized. Right now, when the browser window becomes too small the last image on the left moves to the next row, which I don't want to happen. I want the images to stay in one row. I have looked at many suggestions here and elsewhere online and tried and tried and I can't figure it out! It may be relevant to know that I have the max-width of all the images at 24% because the original images are too big for my purposes. Also,  I have a div around the entire body of the page to set the max-width of the body at 1900px and the min-width at 700px.  Here is the relevant code: </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;br&gt;
  &lt;div id="contain"&gt;
  &lt;img src="webphoto6.jpg" alt="Mary" class="one"&gt;
  &lt;img src="webphoto3.jpg" alt="Mary" class="two"&gt;
  &lt;img src="webphoto42.jpg" alt="Mary" class="three"&gt;
  &lt;img src="WebPhoto.jpg" alt="Mary" class="four"&gt;
  &lt;/div&gt;
  &lt;div id="clearfix"&gt;
  &lt;br&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#contain { max-width: 1900px; 
  min-width: 780px;
  display: block; 
  }
  img { width: auto;
  height: auto;
  width: auto\9; 
  }
  .one {float: left;
  max-width: 24%;
  max-height: auto;
  padding-right:20px;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px; 
  }
  .two {float: left;
  max-width: 24%;
  max-height: auto;
  padding-right: 20px;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px; 
  }
  .three { float: left;
  max-width: 24%;
  max-height: auto;
  padding-right: 20px;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px; 
  }
  .four {float: left;
  max-width: 24%;
  max-height: auto;
  padding: 0px; 
  margin: 0px;
  }
  #clearfix {clear: both;}
  </code></pre>
  
  <p>I appreciate the help!</p>