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

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

• javascript
• jquery
• html
• css

• Are you looking for something like jQuery Masonry? – Dennis Commented Dec 20, 2011 at 18:53
• Thanks for the reply. I was looking at jQuery Masonry but I wasn't able to get it to work exactly how I want. Masonry seems to put the items together more tightly than I want. I want each row to be separate and to maintain the space between rows (like in my second diagram where there is space between one and four). – user636044 Commented Dec 20, 2011 at 19:05

1 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/Wexcode/zgNkA/