CODEWITHSUNDEEP
javascripthtmlcssheight
bobo
bobo

Reputation: 8727

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

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.

Upvotes: 3

Views: 3806

Answers (3)

PruitIgoe
PruitIgoe

Reputation: 6384

I handle it with Javascript:

function resizerows(classname) { 
    //init some vars
    var tablerowlist = new Array();
    var maxheight=0;

    //get all elements with same class
    var rowlist = document.getElementsByTagName("li");

    //loop through items and check class name
    for (var r=0; r<rowlist.length; r++) { 
        if (rowlist[r].className.indexOf(classname) != -1) {
            //if class name contains classname this is an li we are looking for, add to our array
            tablerowlist.push(rowlist[r]);
        }//end class name check
    }//end loop through all the li elements

    //loop through our good list of li elements
    for(var l=0; l<tablerowlist.length; l++) {
        //dig through the li tag and get all the elements 
        var childlist = tablerowlist[l].children;

        //init a max height

        //loop through the child elements (in this case <p> tags)
        for(var c=0; c<childlist.length; c++) { 
            //check to make sure its a P tag
            if (childlist[c].tagName == "P") { 
                //compare height of element to maxheight, if greater maxheight = element height
                if (childlist[c].offsetHeight > maxheight) { 
                    maxheight = childlist[c].offsetHeight; 
                }
            }
        }//end loop through child elements

        //now we have the maxheight loop through all the rows and set the height to max height
        for (var ch=0; ch<childlist.length; ch++) {
            childlist[ch].style.height = (maxheight)  + "px";
        }

        //reset max height;
        maxheight = 0;
    }//end loop through the li elements
}

It's a little blunt, you can get more elegant code using a framework like jquery but this has worked for me, cross browser and platform.

Edit:

This is for HTML code formatted thus: 

<ul>
<li class="row">
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3, which is really really long text that'll be bigger than the other two items</p>
</li>

<li class="row">
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3, which is really really long text that'll be bigger than the other two items</p>
</li>

Upvotes: 2

Mark Chorley
Mark Chorley

Reputation: 2107

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.

Upvotes: 3

Joeri Hendrickx
Joeri Hendrickx

Reputation: 17445

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

Upvotes: 1

Related Questions