Question

I Want to place a div over another div without using height in pixels.I have used this code

<div style="position: relative;height:78px;">

    <div style="width:425px;position: absolute;top: 0;left: 0;">
      Content for First div
    </div>  

    <div style="z-index:10;position:absolute;top: 0;left: 0;"> 
      Content for Second div
    </div> 
</div>

The first div content will change dynamically . So is their any way to put height auto some thing like in parent div

Answer 1

both child divs are taken out of the flow, so the parent will have no natural height (which normally is “stretched” by it’s children).

since you have pre-loaded data on the first child div, make the second match to it.

HTML:

<div id="parent">
    <div id="firstChild">
      Content for First div
    </div>  

    <div id="secondChild"> 
      Content for Second div
    </div> 
</div>

CSS:

#parent{
position:relative;
}

#firstChild{
width:425px;
}

#secondChild{
width:425px;
position:absolute;
top:0;
bottom:0;
}

NOTE: watch out for collisions in your styles, i used ID here. replace accordingly