Position button inside a div to the bottom right-CodePudding

I would like the button to be positioned at the bottom right of the red colored div. I used padding-bottom and margin-bottom properties but that does not seem to work. Could anyone please help?

.container {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 200px;
  border: 1px solid blue;
  padding: 8px;
}

.box {
  width: 300px;
  height: 150px;
  border: 1px solid red;
}

.button {
  float: right;
}

<div >
  <div >
  </div>
  <div>
    <button >Click</button>
  </div>
</div>

CodePudding user response：

An alternative to the other answers using display: grid instead. This is easier for the browser than using position absolute or float!!

/* ignore */ body { margin: 0 } * { box-sizing: border-box } /* ignore */

.container {
  display: grid;
  width: 50vw;
  height: 100vh;
  border: 1px solid blue;
  padding: 8px;
}

.box, .button { grid-area: 1/1/-1/-1 }

.box { border: 1px solid red }

.button { margin: auto 0 0 auto }

<div >
  <div >
  </div>
  <div >
    <button>Click</button>
  </div>
</div>

CodePudding user response：

I have just answered the same thing to other question. ... Use position:relative. I see the point why people refrain from using it. But really ain't no shame. Especially when there isn't a parent-child relation between the elements.

.container {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 200px;
  border: 1px solid blue;
  padding: 8px;
}

.box {
  width: 300px;
  height: 150px;
  border: 1px solid red;
}



.button {
  float: right;
  position:relative; 
  top: -22px;
}

<div >
  <div >
  </div>
  <div>
    <button >Click</button>
  </div>
</div>

CodePudding user response：

.button {
    float: right;
    position:relative; 
    transform:translate(-5px,-25px); //x and y controls
  }