Reputation: 1125
I have a outer div which has two inner divs. The second inner div may or may not contain text value. Currently the two inner divs are displayed at the top. However I want to be displayed always at the bottom. The divs are shown below:
<div class="outerDiv">
<div class="firstInnerDiv"></div>
<div class="secondInnerDiv"></div>
<div>
I tried to add position:absolute;bottom:0 to both the inner divs. Then both disappear. I tried vert-align:bottom at the outer div, which has no effect.
Thanks
Upvotes: 2
Views: 1141
Reputation: 3461
Give position:relative;
to your outer div and inner divs and position:absolute;
to your inner wrapper (.inner
), That would do it!
.outerDiv{
position:relative;
width:100px;
height:200px;
border:1px solid black;
}
.inner{
position:absolute;
bottom:0;
}
.firstInnerDiv, .secondInnerDiv{
width:100px;
height:auto;
}
.firstInnerDiv{
position:relative;
border:1px solid red;
}
.secondInnerDiv{
position:relative;
border:1px solid green;
}
<div class="outerDiv">Main
<div class="inner">
<div class="firstInnerDiv">Div 1</div>
<div class="secondInnerDiv">Div 2</div>
</div>
</div>
Upvotes: 2
Reputation: 2106
Position Of Parant Div Is Should Give "Relative" And Give Position Absolute To InnerDivs.
.outerDiv{
position:relative;
width:200px;
height:200px;
border:1px solid #ff8800;
}
.firstInnerDiv{
position: absolute;
width:100%;
height:105px;
border:1px solid red;
bottom:-110px;
}
.secondInnerDiv{
position: absolute;
width:100%;
height:105px;
border:1px solid red;
bottom:-215px;
}
This Is Example Of Your Requirement Try Once .
<div class="outerDiv">This IS Main Div
<div class="firstInnerDiv">Inner One</div>
<div class="secondInnerDiv">Inner Two</div>
<div>
Upvotes: 1
Reputation: 1439
Absolutely positioned elements will be positioned in relation to the closest parent that is positioned. If none are positioned, they will be positioned in relation to the . If you give .outerDiv
a CSS of position: relative;
and then position the inner elements absolutely, then you should get the results you're looking for. You can read more on positioning here.
Upvotes: 0