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>

Sniffy

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.

Unrounded

Thank you for your answer. Shame that it has to be fixed by adding more markup though. – Sniffy

Answer 2

---

Dealing with different box models could be very tricky and time consuming. I definitely suggest you to avoid dirty CSS hacks that will not validate your css files.

You could try to drop the use of percentage values and go for an "elastic" layout. In this case you specify the min-width and max-width for your block elements. An article about elastic layout is here and something more here

In alternative you could detect the browser via javascript or via library and use conditional CSS files. This is my favorite approach when dealing with IE.

conditional css is a library that will help you with that, but there are many more options in the web.

Good luck

Ibarra

Thanks for the answer, I hadn't seen that conditional css library before. – Sniffy