width:100% vs. width:inherit

See jsfiddle http://jsfiddle.net/bt5nj/2/ and http://jsfiddle.net/bt5nj/3/

width:inherit inherits width that defined by parent.

HTML:

<div id="parent">
<div id="child"></div>
</div>

CSS:

#parent
{
    width:50%;
    height:30px;
}
#child
{
    width:inherit;
    height:100%;
    background-color:red;
}

This makes child width 25%, but if I redefine it with width:100% it will define width of child 50%.

Related