0

I have two divs that I would like to place one on top of the other, so I can create a tab system in an applet I am making. These two divs reside within a parent div, that uses auto height because I do not know the exact height of the other two divs (both children will be of same height). I can position the two divs one on top of the other with absolute positioning when the parent uses relative positioning, but the auto height doesn't respond (most likely because of absolute positioned children) creating a border line of an empty div instead of a wrapper with elements inside.

See problem here: http://jsfiddle.net/h5bjt69s/

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

I tried modeling a solution from this, but I believe the auto height throws things off. Position absolute but relative to parent

How can I wrap the two divs with the parent div and still maintain the overlaying of the two children?

Community
  • 1
  • 1
user3735633
  • 251
  • 2
  • 19

2 Answers2

5

This:

both children will be of same height

Actually solves your problem:

  • Position one div using position: static; it will determine the height of the parent
  • Position the other div(s) using position: absolute (it will appear on top)

Updated Fiddle

Salman A
  • 262,204
  • 82
  • 430
  • 521
3

Here are the changes

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

DEMO

Another 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*/
}

Updated

Benjamin
  • 2,612
  • 2
  • 20
  • 32