Member Avatar for Jory_1

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; 
                         }
  • 2 Contributors
  • 2 Replies
  • 2K Views
  • 48 Minutes Discussion Span
  • Latest Post Latest Post by Jory_1

Dani AI

Generated

the overlap usually means the expanding child is out of normal flow (absolute/transform) or the parent is not containing its children. If you keep the children in normal flow and let the parent size itself, Parent_2 will be pushed down automatically. A simple pattern is to contain floats and rely on auto height, then animate the child’s max-height (since height:auto will not transition):

/* contain children and floats without extra markup */
#Parent_1 { display: flow-root; }

/* collapsed state */
#Parent_1 .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

/* if you have a wrapper that receives hover/focus */
#Parent_1 .wrapper:hover .panel,
#Parent_1 .wrapper:focus-within .panel {
  max-height: 500px; /* or a safe upper bound */
}

display: flow-root creates a new block formatting context so the parent wraps its children (handy if anything is floated). Using max-height gives you a smooth open/close while the parent’s height grows naturally. (developer.mozilla.org)

If you truly need to style the parent based on a child being hovered (your original idea), modern CSS now allows it. For example:

#Parent_1:has(#Child_1:hover, #Child_2:hover) {
  padding-bottom: .5rem; /* or change z-index, outline, etc. */
}

The :has() relational selector is supported in current Chrome, Safari, Firefox, and Edge; use it if your audience is on modern browsers. ()

One more gotcha: if the child expands via transform (e.g., scaleY) or is position:absolute, the parent will not grow because transforms do not affect document flow. Switch to height/max-height in-flow to avoid overlap. (developer.mozilla.org)

Nice call by on keeping the parent height auto; the tweaks above make it robust and animated.

Recommended Answers

All 2 Replies

Member Avatar for bhatmujhtaba

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

Member Avatar for Jory_1

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.