title: Multiple images in a Div CSS
body: <p>I'm making a simple css Box layout with images that float left, and it works fine when I place them in seperate div's :</p>
  
  <pre><code>&lt;div id="images"&gt;
      &lt;figure&gt;
          &lt;img src="photos/image1.jpg" alt=”Photo” width=150 height=150&gt;
      &lt;figcaption&gt;Watch #1&lt;/figcaption&gt;
      &lt;/figure&gt;
      &lt;/div&gt;
  
  &lt;div id="images"&gt;
      &lt;figure&gt;
          &lt;img src="photos/image2.jpg" alt=”Photo” width=150 height=150&gt;
      &lt;figcaption&gt;Watch #2&lt;/figcaption&gt;
      &lt;/figure&gt;
  
  &lt;/div&gt;
  
  &lt;div id="images"&gt;
  
      &lt;img src="photos/image3.jpg" alt="Photo" width="150" height="150"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#images {
      float:left;
      border-style:solid;
      border-width:3px;
      padding:20px;
      margin:5px;
      height:220px;
      width:220px;
      overflow:hidden;
      text-align:center;
  
  }
  </code></pre>
  
  <p>But I receive an error: "duplicate ID reference" I've googled and its told me this definitely should be avoided,</p>
  
  <p>but everytime I add all the images into the div my code doesnt work and they just end up everywhere. Can anyone help?</p>
  
  <p>Cheers</p>