Reputation: 8727
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
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
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
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