Each yellow box is 32% of its parent (30% width + 1% padding each side). Each one also has a left margin of 1% meaning all three of them occupy 99% of the parent width when floated side-by-side. This should leave around 1% gap to the right of the parent (allowing for any rounding issues) so overall the margins at the sides of the boxes look equal/symetrical.

IE6 and IE7 do this (IE5.x also renders as expected, allowing for broken box models), as do Mozilla and Safari. Opera 7, 8 and even 9.1 still do not. They always draw the 'rows' too narrow however you do it.

This is not a box model/doctype issue or the effect of any of the other CSS properties being used. Opera simply miscalculates its widths or is introducing an unnecessary 1% gap for some reason.

The same goes for the green boxes, which are the same but the widths/margins are calculated for two and four column 'rows' instead. There is always a bigger gap to the right of the parent (the black area) than to the left in Opera 7-9.

Does Opera somehow lose 1% in its measurement of the parent element's pixel width before calculating percentages based upon it, because no matter how many columns there are it always seems to leave a gap that's about 1%?