-1

How to align to bottom text in second div?How to align to bottom text in second div?How to align to bottom text in second div?

div { background-color: red; } 
div {
height: 100%;
}      
div > div {
border: 1px solid black;
}
<div style="height:100px; width:300px;">
<div>
one
</div>
<div>
two
</div>
</div>
WEB_D
  • 69
  • 7

3 Answers3

0

Adding position:relative to parent div and add position:absoulte to text inside child div

  .parent {
    position: relative;
    height: 120px;
    width:100px;
  }

  .parent div {
    background-color: red;
    margin-top: 2px;
    height:50px;
    width: 50px;
    border: 1px solid black;
  }
  .parent div.second-div p{
    position: absolute;
    bottom: 0;
  }
<body>

  <div class="parent">
    <div class="first-div">
      one
    </div>
    <div class="second-div">
      <p> two</p>
    </div>
  </div>

</body>
Eng_Farghly
  • 1,987
  • 1
  • 23
  • 34
0

You don't need to add anything to the HTML or alter the position value of the element.

You can add display: flex to the second element and align its items to the end:

div {
  background-color: red;
}

div {
  height: 100%;
}

div>div {
  border: 1px solid black;
}

div>div:nth-child(2) {
  display: flex;
  align-items: end;
}
<div style="height:100px; width:300px;">
  <div>
    one
  </div>
  <div>
    two
  </div>
</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
0

The best possible solution to move div content to the bottom is as follows. Simple, use position:absolute; with bottom:0 in the div with the element name in CSS... it's on you which element you will align at the bottom.

*{
margin:0;
padding:0;
}

.top-content{
background:red;
height:50vh;
width:80%;
}
.bottom-content{
background:purple;
height:50vh;
width:80%;
}

.bottom-content h1{
position:absolute;
bottom:0;
}
<div class="top-content">
<h1>I'm from top content</h1>
</div>
<div class="bottom-content">
<h1>I'm from bottom content</h1>
</div>
Anshu
  • 3
  • 3