Problem with percentage based widths in Opera

Question

I'm trying to make a fluid grid layout and I've run into a problem with inconsistent width rendering in Opera. In Opera the width of elements are consistently smaller than the other browsers. I'm trying the fluid 960 grid system but if it wont be consistent then I may change to fixed sizes.

Does anyone know how I can get Opera to render the width the same as the other browsers?

Here is the CSS and HTML I'm using for this demo

.show_grid {
  background: url(../img/grid.gif) no-repeat center top;
}

html, body{
  margin: 0;
  padding: 0;
}
.container {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  max-width: 936px;
  padding-top: 15%;
}
.box {
  width: 15.633%;
  background: #006;
  color: #999;
  margin: 5% .55%   
}


<div class="container show_grid">
  <div class="box">2 column - browser name</div>
</div>

Answer 1

Opera rounds percent widths but it doesn't round percentage values for paddings and margins.

So, the easy way is to set the width: 15%, and add padding-right:.633%. But doing so, only the block would be bigger visually.

If you want to have it's width fair so all childs would have the same width, you'll need to add another wrapper and add the appropriate negative margin to it. It is calculated by this formula: 100/width*padding, in your case: 100/15*0.633. It would compensate the padding and everything would be cool.

Here is a fiddle with all the variants: http://jsfiddle.net/kizu/8q23d/ — fixed width in pixels, block with width:15.633%, first visual fix and the proper fix at the end.