how to set child div width 80% to parent div - css

Question

i want to set child div width to be 80% of parent div. how to do
<div id='container'>
<div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
<button id="BtnPreviousMonth">Previous Month</button>
<button id="BtnNextMonth">Next Month</button>
</div>
<div id='subcontainer'>
<div id="mycal" style="position:absolute;"></div>
</div>
</div>
when i set mycal width and height in %. it has no effect. any suggestions ?

Answer 1

Set width:80% , you can set width in percentage(%) , The percentage is calculated with respect to the width of the generated box's containing block.
HTML:
<div id="container">
<div id="child">
</div>
</div>
CSS:
#container{
position:relative;
width:500px;
height:100px;
}
#child{
width:80%;
}
Fiddle Demo

Answer 2

You must have to provide with to parent div then after you can give width in % to child div.

Answer 3

In your snippet mycal is absolutely positioned. That means that its width and height in % will be relative to the nearest non-static positioned parent (position: relative, absolute, fixed) or to the body in case there is no such. If you want to give mycal 80% width of subcontainer you can make
#subcontainer {
position:relative;
}
but, since subcontainer does not have a defined height and it's child is absolutely positioned (and therefore doesn't affect parent's height) - subcontainer's height is 0. Therefore 20% of 0 is 0. To solve this issue, you can either specify height of subcontainer or populate it with static positioned content.
Here is an example: http://jsbin.com/iYOQAKiS/1/edit
<div id='container'>
<div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
<button id="BtnPreviousMonth">Previous Month</button>
<button id="BtnNextMonth">Next Month</button>
</div>
<div id="subcontainer" style="position:relative;">Some static content
<div id="mycal" style="position:absolute;width:80%;height:20%">
MyCal content
</div>
</div>
</div>

Answer 4

Since you want to set width 80% to the child mycal, set width to its parent subcontainer
#subcontainer{
width:1000px;
heigth:1000px
}
#mycal{
width:80%;
height:20%;
}

Answer 5

When you set a percentage width and height, it has an effect.
I guess, the problem in your case is, that it is just not visible, set some background-color to see it
#mycal {
width: 80%;
height: 50%;
background-color: plum;
}
See JSFiddle
Although, this might not be what you want. Since you've set position: absolute, the containing box is not subcontainer, but the body element.