title: Images overlap on browser resize. How to space them out?
body: <p>I have a photo gallery and my photos are diplayed as thumbnails.
  When I resize the browser they move as I want them to but instead of getting evenly pushed down on to the next line they instead go down but overlap oeach other.</p>
  
  <p>When the browser is full, the images display fine. Here is a screenshot showing the images moved and overlapping when the browser is smaller:</p>
  
  <p><img src="https://i.stack.imgur.com/6PNoO.jpg" alt="enter image description here"></p>
  
  <p>I currently use this code if it helps.</p>
  
  <pre><code>div.photoimg
    {
    margin:2px;
    padding: 5px;
    height:auto;
    width:auto;
    float:left;
    text-align:center;
    }
  div.img photoimg
    {
    display:inline;
    margin:3px;
    }
  div.img a:hover img
    {
    border:1px solid #0000ff;
    }
  div.desc
    {
    text-align:center;
    font-weight:normal;
    width:200px;
    margin:2px;
    }
  </code></pre>
  
  <p>Many thanks for any help.</p>