CODEWITHSUNDEEP
htmlcss
Jordan Aslam
Jordan Aslam

Reputation: 63

Align items to the bottom of the container

I want to vertically align the items to the bottom of the container. The difficulty is coming from the fact that .container is floated left, I didn't find a solution so far.

.container {
  width: 40px;
  height: 250px;
  background: #aaa;
  float: left; /* cannot be removed */
}
.item {
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 50%;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 1

Views: 226

Answers (1)

Stickers
Stickers

Reputation: 78676

If you always have 4 items and everything has a fixed height, you can simply do the math and set some top margin on the first item:

.item:first-child {
  margin-top: 90px; /* 250-40x40 */
}

You can also use flexbox:

.container {
  width: 40px;
  height: 250px;
  background: #aaa;
  float: left;
  /* new */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.item {
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 50%;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 1

Related Questions