CODEWITHSUNDEEP
htmlcss
Massey
Massey

Reputation: 1125

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

Upvotes: 2

Views: 1141

Answers (3)

Hitesh Misro
Hitesh Misro

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

Samudrala Ramu
Samudrala Ramu

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

Michael Kolber
Michael Kolber

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

Related Questions