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

HTML & CSS
1

Hello,

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.

Regards,

-jj. :slight_smile:

2

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?

3

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.

4

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.