Making the height of list items in a row follow their largest height

Question

In this page: http://pastehtml.com/view/1biylhs.html

You can see the book in the center needs more height space than the other two books in the same row because its title has more text.

Currently, each book is contained in a <li> and has a height of 175px.

I can set their height to auto but it still can't make all list items in the same row follow the largest height among them:

http://pastehtml.com/view/1bj19w3.html

What is the simplest way to make the list items in each row follow the largest height of those list items in that row? I have to make it work in IE6 as well.

Many thanks to you all.

Answer 1

This is definitely not easy to do. You talk about rows, but the browser is not seeing rows, it's just seeing wrapped floats.

You could go for tables (not because it's tabular, but just because this layout is very difficult to do without any) but I wouldn't give up that quickly.

As a compromise, I would suggest making each floated block high enough for the image and about three lines of text. Then they each have the same height and line up nicely It's still a guess, but probably the best you can do. .

Answer 2

I suggest adding some additional markup. Make it a list of lists perhaps.

Something like this

<ul>
 <li class="row">
  <ul>
   <li class="book">
    <img />
    <h2>title</h2>
   </li>
   <li class="book">
    <img />
    <h2>title</h2>
   </li>
   <li class="book">
    <img />
    <h2>title</h2>
   </li>
  </ul>
 </li>
<!-- repeat rows here--></ul>

Then some CSS along the lines of

.row{ clear:left; float:left; min-height:175px; }

Note the min-height which allows the height to expand. You will need to feed height to IE6 to achieve the same effect. To do that, you have a lot of options. Conditional comments are one of the standards-compliant choices.

Finally, note that I have used h2 instead of div to contain the book titles. You probably want to give the titles a bit of semantic weight to make them stand out to searches, and so h2 (or any header element) is a better container than div.