Downsizing div with it's content...

Hi, Is there any way to downsize div along with it’s content? What I mean for example I would like to set the parent div width and height to 50% and everything inside should downsize accordingly so the layout wont change… any idea how to achieve this ?

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%

Thanks guys, I think I already tried that methods but I will do this one more time Cheers.