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; 
                         }

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
Thanks!

Be a part of the DaniWeb community

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