html - CSS fix for percentage rounding areas -
Then I have a grid split in three columns, which is a small gap at the end when setting them at 33.33% Due to the rounding errors (mostly in Safari), the column
I have tried to fix it by giving a little extra extra (33.5%) to the column and hiding the last 5%. But this is not my work, it is my code:
-
.grid-outer {width: 100%; Hidden flurry; Background: light; } .grid-inner {width: 100.5%; Hidden flurry; } .box {float: left; Width: 33.5%; Height: 20px; }
But does this work do not work for any reason? Is my code correct?
JSFiddle here:
Your percentage is incorrect Bella. However, with a perfect percentage, there is a circular error in the browser. There is a similar problem in Firefox when focusing the DV some browsers make it better (for example, chrome). In a way I know that getting around it is to use a table, but this is really messy and other disadvantages; Not a good solution.
body, html {margin: 0; Padding: 0; } .grid-outer {width: 100%; Background: light; } .grid-inner {width: 100%; } .box {float: left; Width: 33.33333333333%; Height: 20px; }
Comments
Post a Comment