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.


    <div id="Parent_1">
        <div id="Child_1">

        <div id="Child_2">

    <div id="Parent_2">
        <div id="Child_3">

        <div id="Child_4">
/* 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... */



/* 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; 

Recommended Answers

All 2 Replies

I don't think as per my knowledge it can be done like this.

better solution can be to keep min-height: property for parent div to what you want it to be normally and it's height: property to auto value, this way it will have height of 400px example, and once you hover child div n it's visible, the parents height will increase automatically

ah...yeah...wasn't thinking...your soultion should work... :P

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.