Alinear botón en la parte inferior de div usando CSS

Quiero alinear mi botón en la esquina inferior derecha de mi div. ¿Cómo puedo hacer eso?

introduzca la descripción de la imagen aquí

Css actual de div: 

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;
Author: Harry Joy, 2011-04-28
Source

4 answers

Puede usar position:absolute; para colocar absolutamente un elemento dentro de un div padre. Al usar position:absolute; el elemento se posicionará absolutamente desde el primer div padre posicionado, si no puede encontrar uno se posicionará absolutamente desde la ventana, por lo que deberá asegurarse de que el div de contenido esté posicionado.

Para posicionar el div de contenido, todos los valores position que no sean estáticos funcionarán, pero relative es el más fácil ya que no cambia el posicionamiento divs por sí mismo.

Así que añadir position:relative; al div de contenido, elimine el flotador del botón y agregue el siguiente css al botón: 

position: absolute;
right:    0;
bottom:   0;
 161
Author: Kokos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-16 06:35:05

CSS3 flexbox también se puede usar para alinear el botón en la parte inferior del elemento padre.

HTML requerido: 

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

CSS necesario: 

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

Captura de pantalla:

Imagen de Salida

Recursos Útiles:

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}
<div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>
 16
Author: Mohammad Usman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-28 23:32:37

El contenedor padre debe tener esto: 

position: relative;

El botón en sí tiene que tener esto:

position: relative;
bottom: 20px;
right: 20px;

O lo que quieras

 7
Author: Aron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-04 20:10:53

Va a la derecha y se puede usar de la misma manera para la izquierda 

.yourComponent
{
   float: right;
   bottom: 0;
}
 -26
Author: BehranG BinA,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-31 15:41:48