What is the best way to stack divs within a parent div that has a height set to auto?

Question

What is the best way to stack divs within a parent div that has a height set to auto?

Looking to stack two divs on top of each other within a parent div to create a tab system for an applet. The challenge is that the parent div has auto height and the exact height of the child divs is unknown. Absolute positioning allows me to stack the divs, but the auto height doesn't adjust as expected, resulting in an empty border line instead of wrapping the elements.

To see the issue in action: http://jsfiddle.net/h5bjt69s/

<div id = "parent">
    <div id = "redDiv"></div>
    <div class = "clearfix"></div>
    <div id = "blueDiv"></div>
</div>

Attempted to solve it based on this reference, but the auto height complicates things. Position absolute but relative to parent

How can I wrap the two divs with the parent div while maintaining their stack order?

html css z-index positioning

Answer 1

Answer №1

Here's the solution:

Both children will end up being the same height

This technique can solve your issue:

Place one div with position: static; it sets the parent container's height
Position the other div(s) using position: absolute (it will overlay on top)

Check out the updated Fiddle here

Answer 2

Here's the solution:

Both children will end up being the same height

This technique can solve your issue:

Place one div with position: static; it sets the parent container's height
Position the other div(s) using position: absolute (it will overlay on top)

Check out the updated Fiddle here

Answer 3

Answer №2

Below are the modifications:

#blueDiv {   
    background-color: blue;
    width: 100%;
    height: 50px;
    position: relative;/*changed*/
    top: 0px;
    left: 0px;
    z-index:2;/*added*/
    opacity:0.7;
}

DEMO

Different Style

#blueDiv {   
    background-color: blue;
    width: 100%;
    height: 50px;
    /*position: relative;removed*/
    opacity:0.7;
}

#redDiv {
    background-color: red;
    width: 100%;
    height: 50px;
    visibility: visible;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;/*added*/
}

Modified Version

Answer 4

Below are the modifications:

#blueDiv {   
    background-color: blue;
    width: 100%;
    height: 50px;
    position: relative;/*changed*/
    top: 0px;
    left: 0px;
    z-index:2;/*added*/
    opacity:0.7;
}

DEMO

Different Style

#blueDiv {   
    background-color: blue;
    width: 100%;
    height: 50px;
    /*position: relative;removed*/
    opacity:0.7;
}

#redDiv {
    background-color: red;
    width: 100%;
    height: 50px;
    visibility: visible;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;/*added*/
}

Modified Version

What is the best way to stack divs within a parent div that has a height set to auto?

Answer №1

Answer №2

Similar questions

Creating Circular Trails during Animation in D3.js

"Enhancing user input with a blend of material design and bootstrap-

Tips on updating the highlighted color of the item currently selected in NavBarDropdown using react-bootstrap

What is the process for configuring my CSS and JS files to send HTTP response headers?

Preventing context menu from appearing on a right click by implementing a trigger to re-enable it

What is the method to add gutters in Material UI grid without including margins?

problem with nivo slider causing content to overflow

Interacting with Watir and Cucumber, unfortunately the link is not functional

CSS: border-radius // background-color: white; rounded corners

Responsive on Mobile Devices

Changing the tooltip background color in FullCalendar 6 and Bootstrap 5: A step-by-step guide

Nested divs with independent scrolling capabilities

Floating container leads to delays

Avoiding page refresh while submitting a form can be tricky, as both e.preventDefault() and using a hidden iFrame seem

What is the best way to locate elements with the term "download" in them using Selenium's x-path feature?

Guide to sending an HTML form via email

Swap a jQuery class with another if the class for ul li is currently active

Tips for designing a multi-level dropdown navbar

Tips for identifying repeating id numbers within a form?

The lightbox feature on the page is not functioning properly