CODEWITHSUNDEEP
htmlcsslistrow
KingsInnerSoul
KingsInnerSoul

Reputation: 1382

Force all items in list in each row to have the same height (each item has dynamic height)

I have a list of items <li>, the number of items in the list is dynamic, and the content as well. The list has 4 items per row, define by float:left. The height of each item is dynamic , and as a result the item in the next row gets "stuck" just before the highest item on the above row. Its results in a visually ugly list, and rows not being populated.

How can I force all the items in each row to be the height of the highest row? or, how to force all the items in the list to be the height of the highest items in the list?

Thanks

UPDATE: The final solution is:

<script type='text/javascript'>
$(document).ready(function() {
    var maxHeight = -1;
    var currHeight = -1;
    var prodDescHeight = -1;
    var diffHeight = -1;
    // get the max height of the list items
    $('.my_li_class').each(function() {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });
    // set max height to all items 
    $('.my_li_class').each(function() {
        $(this).height(maxHeight);
    });
});

Upvotes: 0

Views: 911

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105903

use display:inline-block instead floatting.
So when it comes to another 'row', it's in fact a whole new line where next list items will sit.

Upvotes: 1

Related Questions