Can't divide a div equally into 6 parts

Question

I have some code here that splits a div into equally into six.

On desktop browsers this seems to work ok. On the safrai/ chrome on iOS, it doesn't.

You can view it here

http://jsfiddle.net/LZxxB/31/

On my desktop browsers, the height of each div is 50px and fills the container. On mobile browsers, the height for each div is 49px and leaves a space at the bottom of the wrapper (you can see this as a red line on the fiddle above.

Any ideas why?

<div class="fretboardWrapper">
    <div class="strings">
        <div class="string" id="one"></div>
        <div class="string" id="two"></div>
        <div class="string" id="three"></div>
        <div class="string" id="four"></div>
        <div class="string" id="five"></div>
        <div class="string" id="six"></div>
    </div>
</div>

body{
    color:white;
}

#one, #three, #five {
    background:blue;
}
#two, #four, #six {
    background:green;
}
.strings {
    height:100%;
    width:100%;
    position:relative;
}
.string {
    z-index:2;
    height:16.666%;
}
.fretboardWrapper {
    position:relative;
    width:100%;
    height:300px;
    background-color:red;
}

<script>
$('#one').text($('#one').height());
$('#two').text($('#two').height());
$('#three').text($('#three').height());
$('#four').text($('#four').height());
$('#five').text($('#five').height());
$('#six').text($('#six').height());
</script>

EDIT

Interestingly, dividing into 5 works ok http://jsfiddle.net/LZxxB/33/

Is there a decimal place limit when using percentages in safrai mobile?

Answer 1

I'm using a desktop browser and it's setting 49px, not 50px as you mentioned.

Simply changing height to height:16.999%; (50px each) solved the issue for me?

Fiddle

Updte: I tested in different browsers, Chrome is setting 50px, Safari is setting 49px. this much be the difference in rounding algorithm between the browsers. Simply setting height just above 50px (for eg. 16.69%) should probably work cross browser..

This Fiddle is working fine for me on both chrome and safari..

Answer 2

Please update this

.string {
    z-index:2;
    height:17%;
}

Thanks,