CODEWITHSUNDEEP
css
Pavel
Pavel

Reputation: 1288

How to move the div to the bottom of the parent div?

How to align the bottom of the red div with class test with the bottom the right div?

https://jsfiddle.net/1Lujdru9/

html

<div>
    <div class="box">
        <div>sad
            <br/>sad
            <br/>sad
            <br/>
        </div>
        <div class="test">sad
            <br/>sad
            <br/>sad
            <br/>
        </div>
    </div>
    <div class="box">sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>
    </div>
</div>

css

.box {
    display:inline-block;
    vertical-align:top;
}
.test {
    background-color:red;
}

Upvotes: 1

Views: 51

Answers (2)

Alex Char
Alex Char

Reputation: 33218

General I don't suggest it but for your situation you can go with position: absolute and bottom: 0 to child with class .test alongside with position: relative to parent(I add a class to parent .cont).

.box {
  display: inline-block;
  vertical-align: top;
}
.test {
  background-color: red;
  position: absolute;/*add position absolute*/
  bottom: 0;/*add bottom 0*/
}
.cont {
  position: relative;/*add position relative to parent element*/
}
<div class="cont">
  <div class="box">
    <div>sad
      <br/>sad
      <br/>sad
      <br/>
    </div>
    <div class="test">sad
      <br/>sad
      <br/>sad
      <br/>
    </div>
  </div>
  <div class="box">sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>
  </div>
</div>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114989

Flexbox can do that:

.parent {
  display: inline-flex;
}
.box {
  background: #c0ffee;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.test {
  background-color: red;
}
<div class="parent">
  <div class="box">
    <div>sad
      <br/>sad
      <br/>sad
      <br/>
    </div>
    <div class="test">sad
      <br/>sad
      <br/>sad
      <br/>
    </div>
  </div>
  <div class="box">sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>
  </div>
</div>

Upvotes: 0

Related Questions