I have a couple child divs nested inside a parent div, and the children expand on hovering.
Problem is that the neighbor div of the parent gets over-lapped by the children. I could just account for the size when the children are open and resize the parent div to that max height, but it would look much better if handled dynamically.
Bassically:
HTML
<body>
<div id="Parent_1">
<div id="Child_1">
</div>
<div id="Child_2">
</div>
</div>
<div id="Parent_2">
<div id="Child_3">
</div>
<div id="Child_4">
</div>
</div>
</body>
CSS
/* simplified example...the child elements are actually nested within a wrapper */
/* so these children can be hidden, with the wrapper acting as a mouse-over */
/* target, switching the children to visible... */
#Child_1:hover{
height:500px;
}
#Child_2:hover{
height:500px;
}
/* I would like to do this but it doesn't seem to work... */
#Child_1:hover #Parent_1{
height:*original height* + 500px; /* <-- this would force the parent_2 div to move down and prevent it from beng overlapped by child 1 or 2... */
}
#Child_2:hover #Parent_1{
height:*original height* + 500px;
}
