title: Dynamic, Table-ish rows of List Items using CSS and jQuery
body: <p>I have a list of content items, each with a set width but different (variable) heights. Each item in the list will be floated left. The HTML and CSS are as follows:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    li{
      float: left;
      width: 200px;
    }
    li img{
    float: right;
    }
  &lt;/style&gt;
  
  &lt;ul&gt;
    &lt;li&gt;&lt;h3&gt;Item One&lt;/h3&gt;
        &lt;img src="one.png"&gt;
        &lt;p&gt;First item content here&lt;/p&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;h3&gt;Item Two&lt;/h3&gt;
        &lt;img src="two.png"&gt;
        &lt;p&gt;Second item content here&lt;/p&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;h3&gt;Item Three&lt;/h3&gt;
        &lt;img src="three.png"&gt;
        &lt;p&gt;Third item content here&lt;/p&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;h3&gt;Item Four&lt;/h3&gt;
        &lt;img src="four.png"&gt;
        &lt;p&gt;Fourth item content here&lt;/p&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;h3&gt;Item Five&lt;/h3&gt;
        &lt;img src="five.png"&gt;
        &lt;p&gt;Fifth item content here&lt;/p&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>The problem I have has to do with the way the items float left if there is enough space in a row for 3 items and the second item is taller than then fourth item. The fourth item won't start a new row but will instead place to the right of the second item like this:</p>
  
  <p><img src="https://i.stack.imgur.com/S8ruC.png" alt="enter image description here"></p>
  
  <p>What I want is for the list-items to form a sort of table-like structure that will align each row nicely after the previous row at a height equal to the tallest item of the previous row. Instead of what I have above, I want it to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/qGz5d.png" alt="enter image description here"></p>
  
  <p>I would also like to be able to scale the width of the containing div such that the items-per-row adjust as necessary. For example, if a containing div is made wider (ie. if the user re-sizes the window) the number of items per row increases to fill the space. Here is an example of the related problem on a wider container:</p>
  
  <p><img src="https://i.stack.imgur.com/Q2xnV.png" alt="enter image description here"></p>
  
  <p>And here is what I want it to do:</p>
  
  <p><img src="https://i.stack.imgur.com/s3E7t.png" alt="enter image description here"></p>
  
  <p>Based on a previous question, I don't think there is an easy solution to this so I want to use jQuery to get it done.</p>
  
  <p>What I'm thinking is using jQuery to do something like:</p>
  
  <p>Step 1. Set the width of each element to <em>elementWidth</em></p>
  
  <pre><code>var elementWidth = 200; // 200px
  </code></pre>
  
  <p>Step 2. Set a variable <em>containerWidth</em> to the width of the overall container</p>
  
  <pre><code>var containerWidth = $('#container').width();
  </code></pre>
  
  <p>Step 3. Divide the <em>containerWidth</em> by the <em>elementWidth</em> to determine the number of elements per row</p>
  
  <pre><code>var elementsPerRow = containerWidth / elementWidth;
  </code></pre>
  
  <p>Step 4. Add the property clear:left; each <em>elementsPerRow</em>-ith list item</p>
  
  <pre><code>for(x = 0, x &lt; (total number of all elements), x + elementsPerRow){
    // set clear:left to this &lt;li&gt;
  }
  </code></pre>
  
  <p>I'm not very good (a complete beginner) with JavaScript and jQuery. Can someone please help me put this together into a nice piece of code I can copy and paste (and learn from).</p>