The problem with percentage width in Opera

Question

I am trying to create a flexible grid layout and I am having a problem with consistent width rendering in Opera. In Opera, the width of the elements is consistently smaller than other browsers. I am trying to use a 960 grid, but if it is not consistent, I can switch to fixed sizes.

Does anyone know how I can get Opera to display width just like other browsers?

Here are the CSS and HTML that I use 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

Percentage of the round is Opera widths , but it does not round percentage values ​​for paddings and margins.

So, an easy way is to set width: 15% and add padding-right:.633% . But at the same time only the block will be visually visually.

If you want the width to be equal to the width, all child elements would have the same width, you need to add another shell and add the corresponding negative margin to it. It is calculated using this formula: 100/width*padding , in your case: 100/15*0.633 . That would make up for the gasket, and everything would be cool.

Here is a fiddle with all the options: http://jsfiddle.net/kizu/8q23d/ - fixed width in pixels, block with width:15.633% , the first visual correction and the correct correction at the end.

Answer 2

---

Working with different boxes can be very difficult and time consuming. I definitely suggest you avoid dirty CSS hacks that won't validate your css files.

You can try to abandon the use of percentages and switch to an “elastic” layout. In this case, you specify the minimum width and maximum width for your block elements. The article on elastic layout here and something more here

Alternatively, you can discover the browser through javascript or through the library and use conditional CSS files. This is my favorite approach when working with IE.

conditional css is a library that will help you with this, but there are many more options on the Internet.

Good luck.