3 col per row --> float:left; width: 33%;: enough?


I have a result set which I want to display by group of 3 items (3 items per line, that is).

Is it ok if I do it like that:

.foo {
float: left;
width: 33%;

MY worriy is that some browser/device may not wrap.


-jj. :slight_smile:

That should be pretty reliable. Only problem may be with the pixel calculations not quite adding up, but you do have 1% spare. What do you mean by “wrap”? Do you mean one column might drop?

If the floats are uneven heights then they will snag so make sure all have the same amount of data or alternatively set a height in ems to accommodate the largest.

Alternatively use display:inline-block instead of float and then unequal heights will not snag. You will need a hack for IE6 and 7 though which you can find here and a fix for the [URL=“http://www.sitepoint.com/forums/css-53/css-test-your-css-skills-number-35-inline-block-709009.html#post4724244”]white-space bug here if you need it.

It should wrap on the n+3 item. BTW, keep in mind that padding + border are ADDED to width, so it could end up wrapping on the n+2 if you didn’t take that into your calculations.

After the first wrap , as Paul said, you could discover that your elements are snagging if their heights differ greatly. So if you are trying to create a “grid” you will need to be able to give the element matching explicit height.