CODEWITHSUNDEEP
htmlcss
Stephane Grenier
Stephane Grenier

Reputation: 15925

How do you vertical align the div's within a container div vertically to the bottom?

I would like to have everything vertically aligned to the bottom so that the phone numbers are right above the <hr> line rather than way at the top.

<div>
	<div style="float:left; text-align: left;">
		Name<br/>
		555 main street<br/>
		City, State<br/>
		Country<br/>
		Zip<br/>
	</div>
	<div style="float:right; text-align: right;">
		Phone: 555-555-5555<br/>
		Cell: 555-555-5555<br/>
	</div>
</div>
<hr style="clear:left; border: none; border-bottom: 1px solid black">

Upvotes: 2

Views: 53

Answers (1)

Temani Afif
Temani Afif

Reputation: 272955

You can simply use flex like this :

.container {
  display: flex;
  align-items: flex-end; /* this will apply the bottom alignement*/
}

.container>div {
  flex: 1;
}
<div class="container">
  <div style="text-align: left;">
    Name<br/> 555 main street<br/> City, State<br/> Country
    <br/> Zip
    <br/>
  </div>
  <div style="text-align: right;">
    Phone: 555-555-5555<br/> Cell: 555-555-5555<br/>
  </div>
</div>
<hr style="clear:left; border: none; border-bottom: 1px solid black">

Also another solution with inline-block elements (for old browsers if needed):

.container {
  font-size: 0; /* remove white spaces*/
}

.container>div {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  font-size: initial;
}
<div class="container">
  <div style="text-align: left;">
    Name<br/> 555 main street<br/> City, State<br/> Country
    <br/> Zip
    <br/>
  </div>
  <div style="text-align: right;">
    Phone: 555-555-5555<br/> Cell: 555-555-5555<br/>
  </div>
</div>
<hr style="clear:left; border: none; border-bottom: 1px solid black">

Upvotes: 4

Related Questions