I want to put my div in bottom of another div

Question

I have a issue about a position of div. I want to put my div "list-button" in the bottom of the main div "list". And i want that the position will not change with the size of the text above. Actually the position depend of the text, so it is not what i want

Example from application

.list {
  border: 1px solid grey;
  display: flex;
  margin: 30px;
  height: 230px;
  border-radius: 10px;
  box-shadow: 1px 1px 12px #555;
}

.list-img {
  width: 20%;
}

img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.list-content {
  width: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.list-title {
  border-bottom: 1px solid grey;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.list-button {
  border: 3px solid blue;
  display: flex;
  justify-content: center;
}

<div class="list">
    <div class="list-img" *ngIf="moviePoster; else notFound">
        <img src="https://image.tmdb.org/t/p/w200/{{moviePoster}}" alt="...">

    </div>
    <ng-template #notFound>
        <div class="list-img">
            <img src="../../assets/not_found.jpg" alt="...">
        </div>

    </ng-template>

    <div class="list-content">
        <div class="list-title">
            <h4>{{movieTitle}}</h4>
            <h5>{{movieVote}}</h5>
        </div>
        <div class="list-date">
            <p>
                {{movieDate | date: 'dd MMMM, y' }}
            </p>
        </div>
        <div *ngIf="movieText; else loremBlock">
            <p>{{movieText | slice:0:300 }}...</p>
        </div>
        <div>
            <ng-template #loremBlock>
                <p>Oups, overview not found !</p>
            </ng-template>
        </div>
        <div class="list-button">
            <button type="button" class="btn btn-primary">Add</button>
        </div>
    </div>

Thanks you for help me.

Answer 1

You may use position: absolute; to .list-button and position: relative; to .list to position the text to the bottom of .list container.

.list {
  ...
  position: relative;
}

.list-button {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: calc(100% - 20% - 20px);
  ...
}

.list {
  border: 1px solid grey;
  display: flex;
  margin: 30px;
  height: 230px;
  border-radius: 10px;
  box-shadow: 1px 1px 12px #555;
  position: relative;
}

.list-img {
  width: 20%;
}

img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.list-content {
  width: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.list-title {
  border-bottom: 1px solid grey;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.list-button {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: calc(100% - 20% - 20px);
  border: 3px solid blue;
  display: flex;
  justify-content: center;
}

<div class="list">
    <div class="list-img" *ngIf="moviePoster; else notFound">
        <img src="https://picsum.photos/id/500/200/230" alt="...">

    </div>
    <ng-template #notFound>
        <div class="list-img">
            <img src="../../assets/not_found.jpg" alt="...">
        </div>

    </ng-template>

    <div class="list-content">
        <div class="list-title">
            <h4>{{movieTitle}}</h4>
            <h5>{{movieVote}}</h5>
        </div>
        <div class="list-date">
            <p>
                {{movieDate | date: 'dd MMMM, y' }}
            </p>
        </div>
        <div *ngIf="movieText; else loremBlock">
            <p>{{movieText | slice:0:300 }}...</p>
        </div>
        <div>
            <ng-template #loremBlock>
                <p>Oups, overview not found !</p>
            </ng-template>
        </div>
        <div class="list-button">
            <button type="button" class="btn btn-primary">Add</button>
        </div>
    </div>