Question

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:

<style type="text/css">
  li{
    float: left;
    width: 200px;
  }
  li img{
  float: right;
  }
</style>

<ul>
  <li><h3>Item One</h3>
      <img src="one.png">
      <p>First item content here</p>
  </li>
  <li><h3>Item Two</h3>
      <img src="two.png">
      <p>Second item content here</p>
  </li>
  <li><h3>Item Three</h3>
      <img src="three.png">
      <p>Third item content here</p>
  </li>
  <li><h3>Item Four</h3>
      <img src="four.png">
      <p>Fourth item content here</p>
  </li>
  <li><h3>Item Five</h3>
      <img src="five.png">
      <p>Fifth item content here</p>
  </li>
</ul>
</style>

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:

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:

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:

And here is what I want it to do:

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.

What I’m thinking is using jQuery to do something like:

Step 1. Set the width of each element to elementWidth

var elementWidth = 200; // 200px

Step 2. Set a variable containerWidth to the width of the overall container

var containerWidth = $('#container').width();

Step 3. Divide the containerWidth by the elementWidth to determine the number of elements per row

var elementsPerRow = containerWidth / elementWidth;

Step 4. Add the property clear:left; each elementsPerRow-ith list item

for(x = 0, x < (total number of all elements), x + elementsPerRow){
  // set clear:left to this <li>
}

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).

Answer 1

The problem is that you’re trying to use float: left when you should be using display: inline-block. There’s no need for using javascript either.

li { 
    vertical-align: top;
    display: inline-block; }

See: http://jsfiddle.net/Wexcode/zgNkA/