CODEWITHSUNDEEP
jquerycsslistcss-float
Clarus Dignus
Clarus Dignus

Reputation: 3897

Floated list items with unwanted vertical gap

Context:

I have a six left floating list items (2 rows x 3 columns).

Each list item contains a few divs.

Problem:

The vertical height of the list items vary. When the vertical height of list items of the same row are not equal, it distorts the floating of the list items in the following row.

enter image description here

Live example:

Link: http://alethemes.com/orquidea/our-team/

To reproduce the problem, add an extra line to the text (.workerdescr) in the first list item.

This can be done swiftly using Firebug (or any other browser's code inspector).

What I've tried:

Firstly, I've tried wrapping a div around each row of list items but it distorts the floats of the list items in the next row.

Secondly, I've tried using jQuery to equalise the heights. It works up until I manually resize the browser width. The problem reappears at specific browser widths (if only for a mere few pixels but occurs nonetheless).

//Applied for when document ready and when browser resizes:
var contentHeight = $('.heightfix_listitem1').height();
$('.heightfix_listitem2, .heightfix_listitem3').css('height', contentHeight + "px");

Question:

Does anyone have a neat HTML/CSS/jQuery fix that will prevent the floated list items distorting in the second row? The fix doesn't have to be pretty or brilliant once so long as it works.

Upvotes: 2

Views: 153

Answers (2)

j08691
j08691

Reputation: 207901

One option, and one that takes little code, would be to clear the fourth item (clear:both or clear:left).

Upvotes: 0

thirtydot
thirtydot

Reputation: 228182

There are a few different ways to fix this.

You can switch to using display: inline-block instead of float: left:

.teamlist li {
    width: 32%;
    margin-bottom: 50px;
    margin-right: 1%;
    display: inline-block;
    vertical-align: top;
}

The tops of items in every row will always line up, and this technique will continue to work if you have a different number of elements per row (for instance through a media query).

Upvotes: 2

Related Questions