Floated list items with unwanted vertical gap

Question

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.

@j08691 : Nice solution and it works responsively. Why not add your solution as an answer? Also, thank for the edit. — Clarus Dignus, Nov 22 '13 at 21:30

score 2 · Answer 1 · answered Nov 22 '13 at 21:16

2

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

answered Nov 22 '13 at 21:16

thirtydot

224,678
48
389
349

Thank you. Using display instead of float works (in conjunction with the reduction of margin-right as your code implies). – Clarus Dignus Nov 22 '13 at 21:34
I've chosen j08691's answer because it requires one edit less (trivial, I know) and it doesn't require the margins to be resized. On the other hand, if I were to requrie additional rows of list items, your solution is superior in that it only needs to be applied once whereas j08691's solution would need to be applied to the fourth, eighth, twelfth etc. list item. Considering I didn't stipulate this as a requirement in my question (which it is) I've opted for j08691's answer. – Clarus Dignus Nov 22 '13 at 22:02
No problem, both solutions will work for you. If you had more elements, you could use `li:nth-child(3n+4)` to apply `clear: both` to the required items. – thirtydot Nov 22 '13 at 22:08
Tested and confirmed. Very slick. Thank you. – Clarus Dignus Nov 22 '13 at 22:23
I've been advised that inline-block in conjunction with margin-right may present a bug in certain browsers and to instead wrap every three list items in a div (e.g.`div.list-float-fix`) with the following CSS: `.list-float-fix:before, .list-float-fix:after {content: ""; display: table;} .list-float-fix:after {clear: both;}`. – Clarus Dignus Nov 24 '13 at 15:34
There are no particular problems with `inline-block` and `margin-right`, which browsers are you talking about? – thirtydot Nov 24 '13 at 17:55
I may have incorrectly defined margin-right as the culprit. From what I've been advised, Firefox adds an undesirable space to the right of inline-block elements in certain cases. From what I've read though, this can be circumvented by removing the new line or spaces from the mark-up (http://stackoverflow.com/questions/441279/firefox-3-adds-spacing-to-spans-with-displayinline-block or http://stackoverflow.com/questions/1833734/display-inline-block-extra-margin). Furthermore, the problem doesn't seem unique to Firefox (http://css-tricks.com/fighting-the-space-between-inline-block-elements/). – Clarus Dignus Nov 25 '13 at 21:44
Apologies for relaying on partial advise without the necessary full context. – Clarus Dignus Nov 25 '13 at 21:45

score 0 · Accepted Answer · answered Nov 22 '13 at 21:32

0

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

answered Nov 22 '13 at 21:32

j08691

204,283
31
260
272

Please see my response to thirtydot. – Clarus Dignus Nov 22 '13 at 22:07