Question

I’m having an issue applying a CSS Width with a percentage and a decimal (e.g 33.33) to a div.

It seems to work fine in Chrome but plays up in Opera and Firefox.

http://jsfiddle.net/nhkz9/1/

Opera and Firefox both just round the percentage up, and because of insufficient width in the container, the third div moves to a new line. But when the percentages are not rounded up, there is enough space for all three to fit in one line.

any ideas on how i could fix this issue?

thanks

Answer 1

The demo you posted adds 1px border to two of the <div>s. By default this is not included in the 33.33% calculation, so your <div>s will never fit. To change this, use box-sizing: border-box;.