title: Stacking Rows of Images Using HTML5/CSS3?
body: <p>I am trying to line images up row by row but for some reason the outcome is not what I want it to be. The only time the images break to a new line is when I fill the page. I tried overflow:hidden, but then when the images expand, they are covered by white space. I can't tell if there is something wrong with my code or if I'm just doing it wrong. I have an poorly drawn image and the the code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>figure {
    width: 150px;
    float: left;
    margin: 0 20px 0 0;
    background: white;
    border: 10px solid white;
    -webkit-box-shadow: 0 3px 10px #ccc;
    -moz-box-shadow: 0 3px 10px #ccc;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 1s ease;
    position: relative;
  }
  figure img {
    width: 100%;
  }
  figure:hover {
    -webkit-box-shadow: 0 3px 10px #666;
    -moz-box-shadow: 0 3px 10px #666;
  }
  figure.tall:focus {
    outline: none;
    -webkit-transform: scale(3.0);
    -moz-transform: scale(3.0);
    -webkit-box-shadow: 0 3px 10px #666;
    -moz-box-shadow: 0 3px 10px #666;
    z-index: 9999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="image-gallery"&gt;
  
    &lt;div class="wrapper"&gt;
      &lt;figure class="tall" tabindex=1&gt;
        &lt;img src="Gallery/image.jpg" alt="" /&gt;
      &lt;/figure&gt;
      &lt;figure class="tall" tabindex=2&gt;
        &lt;img src="Gallery/image.jpg" alt="" /&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
  
    &lt;div class="wrapper"&gt;
      &lt;figure class="tall" tabindex=3&gt;
        &lt;img src="Gallery/image.jpg" alt="" /&gt;
      &lt;/figure&gt;
  
      &lt;figure class="tall" tabindex=4&gt;
        &lt;img src="Gallery/image.jpg" alt="" /&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/latns.png" alt="Example"></p>
  
  <p>Any help or suggestions is appreciated.</p>
  
  <p>P.S. I apologize for my lack of paint skills.</p>