Downsizing div with it's content...

If you put width:50%; height:50% on the parent div, wouldn’t width:auto; height: auto; work for the child div(s) ? And you’d probably add some padding if it’s needed.

Of course, you would still need the parent div’s parent to have a width.

width and height always rely on their parent element (except you use px of course)

If the child div has a width of 100% (which is the same as ‘auto’) it has always the size of it’s parent (if you don’t set margin or padding)

If you would like to set the parent to 50% and and the child to 50% you have to use inherit> HTML :

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

#cont{ /*only to have an absolute container */
    width:600px;
    height:600px;
    background:green
}
#parent{
    width:50%; /* is 300px */
    height:50%;
    background:red;
}
#child{
    width:inherit; /* is 150px */
    height:inherit;
    background:blue;
}

If you don’t use ‘inherit’ width will be ‘auto’ which is 100%