Floating DIV elements is not lining up...

Question

I have dives that I am floating so that they show side by side. Here is my code:

.serviceMembersPosition {
    width: 190px;
    float: left;
    display: inline;
    border: 1px solid #999;
    margin: 5px 5px 5px 0;
    padding: 5px;
}

It works however if one of the DIV's has more info than the others, it stuffs up the floats. See how there is a gap in my screenshot below. Is there any way to overcome this? I am using JQuery with my website. Maybe there is some code for this?

Answer 1

To avoid that, you need to clear the float after every "row".

<div style="clear: both;"></div>

Insert a DIV like that before any DIV that you want to be the left-most one in the current row.

Answer 2

What you see is normal behaviour ..

a simple css trick is to clear:left every three items (since you have 3 boxes per row)

in css3

.serviceMembersPosition:nth-child(3n+1){clear:left;}

since few browsers support css3 you can use the jquery equivalent

$('.serviceMembersPosition:nth-child(3n+1)').css('clear','left')​​​​​​​​​​​​​​​​;​

but still IE fails to render correctly..

for IE you will have to either wrap each row in a div and set overflow:auto to it or put a clearing div / br after each row with a css rule that has clear:both

Answer 3

You issue seems to be a line wrapping problem. Some of your descriptions take up 2 lines compared to those that take up 1 line. Try using a plug-in that can handle this.

Setting Equal Heights with jQuery