Grid design using percentages (33.333%) breaking in Chrome

gots a problem here with percentages.

I’m working on a front end for an intranet database and have practically finished the job, BUT, I’ve found a rather stubborn bug. This renders fine in firefox, but in chrome, I’m getting box size problems probably to do with how the two calculate percentages.

I can’t post my screen grabs but here’s the fiddle:

https://jsfiddle.net/DeanActual/k317fpz5/

You’ll see if you move the viewport around in chrome some of the small boxes get “stuck” alongside the large box. Doesn’t matter if it’s with or without borders and I’ve tried messing around with percentages such as 33.329% which, again, seem to be taken on board by firefox but spurned by chrome.

I’ve read around a bit and it seems to be quite a well known problem that plagues many, but I haven’t been able to find a fix.

Fiddle code below:

<div id="body">

  <div class="block large"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>

</div>



/* --- css --- */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.block:after{
    content:" ";
    display:block;
    margin-top: 100%;
}

.block{
    float:left;
    border:5px solid black;
}

.large{
    width:33.329%;
    background:pink;
}

.small{
    width:16.666%;
}

div .small:nth-of-type(3n+1) {
     background-color: blue;
}
div .small:nth-of-type(3n+2) {
     background-color: red;
}
div .small:nth-of-type(3n+3) {
     background-color: yellow;
}


Source: cross-browser

Leave a Reply