How to make parent div grow in height along with its child that has fixed position?
i have these 2 divs :
<div id="parent" style="border:1px silid;background-color:#fff"> <div id="child" style="position:fixed;width:100px;height:100px; border:solid 1px;"> </div> </div>
Bascally i want the fixed child to stay inside the parent div , so the parent div should resize its height every time the page scrolls down (the child moves down).
Is there a css solution or should i make it in js ?
Don't think css can make it.
You cannot do this with CSS (children cannot control parents through CSS, sadly).
Here is a fiddle: http://jsfiddle.net/TfNXs/ (I changed a few things in the styling to make the changes easier to see.)
Note that I've only done it on page load; you may want to think about binding that code to any events wherein the #child's size might change.
You should try to apply "overflow: hidden;" to your parent in your CSS. Remove "height" attribute (or set it to "auto"), as well.