list items not floating left

[JohnMerlino]

Hey all,

Notice in this link:

HL Law Group

the 4 images nested in lists do not align correctly. The first two align correctly, then the third one should go below the first one and the fourth one should go below the second one. Yet, instead, the third one aligns to the right (rather than left) so it sits under the second one, not first one. I am not sure why this is occurring. Even when I put float: left; or display: inline, to the li tags, still it gives same wrong behavior.

Thanks for response.

[ralph.m]

Set a height on those LIs, or make the images all the same height. The first image is 226px tall, the second 224px, so the third LI is snagging on the first and being prevented from floating all the way left.

[Paul O'B]

These days I prefer to use inline-block for variable height elements and avoid the snagging issue.

e.g.

.gallery_image li {
 float:none;
display:inline-block;
vertical-align:top;
}
* html .gallery_image li {
  display:inline;
}
*+html .gallery_image li {
  display:inline;
 }

Elements can be any height and still line up.

[ralph.m]

Off Topic:

These days I prefer to use inline-block for variable height elements and avoid the snagging issue.

I'm sure if you say that enough times, Paul, it will get through my skull!

[JohnMerlino]

These days I prefer to use inline-block for variable height elements and avoid the snagging issue.

e.g.

.gallery_image li {
 float:none;
display:inline-block;
vertical-align:top;
}
* html .gallery_image li {
  display:inline;
}
*+html .gallery_image li {
  display:inline;
 }

Elements can be any height and still line up.

Thanks, that worked on IE too.