CSS width in Percent related to the grand parent

Question

How to relate width in percent to the grand parent?

Answer 1

Use javascript:

var g = document.getElementById('grandparent');
var w = g.clientWidth;
if (w > 400)
    w *= .3;
var c = document.getElementsByClassName('child');
for (var i=0; i < c.length; i++) {
    c[i].style.width = w+'px';
}

I have a jsfiddle example.

Answer 2

You could simply relate width of li s to the parent ul which in turn it relates to the grand parent div:

div{
    overflow: hidden;
    width: 100%;
}
ul{
    width: 1000%;
}
li{
    width: 3%;
}