Drifter Drifter - 3 months ago 10
CSS Question

How to display two inner divs at the bottom of an outer div

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

Answer

Give position:relative; to your outer div and inner divs, 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>

Comments