Posicionamiento CSS "align"

Question

<div>
<h1>Title</h1>
<table>
...
</table>
</div>

Ahora, el

<h1>

tiene un margen: 0; por lo que es en la parte superior de la div. La altura del div es 300px.

Sin embargo, me gustaría que la mesa se coloque en la parte inferior de la división, por ejemplo. valign = " parte inferior " pero para toda la mesa.

Answer 1

Intente esto: http://jsbin.com/emoce

Aunque es similar a la solución de Darryl. Excepto que no estoy usando position: absolute en el div envoltorio, sino posición: relativa para hacer que la posición de la tabla sea absoluta para eso.

Answer 2

Esto es lo que Remy Sharp sugirió:

<style type="text/css" media="screen">
#container { 
    position: relative; 
    margin: 0;
    height:300px;
    border:1px solid #000; 
}
#container h1 { 
    margin:0; 
}
#tableLayout { 
    position: absolute;
    bottom:0; 
    border: 1px solid #c00;
}
</style>

<div id="container">
    <h1>Title</h1>
    <table id="tableLayout">
      <tr><td>example cell</td></tr>
    </table>
</div>

¡Parece que funciona!

Lo publiqué aquí para que siempre esté aquí.

Answer 3

¿Qué pasa con esto?

<style type="text/css">
#container { 
    position: absolute; 
    margin: 0;
    height:300px;
    border:1px solid #000; }
#container h1 { 
    margin:0; }
#tableContainer { 
    position: absolute;
    bottom:0; }
</style>

<div id="container">
    <h1>Title</h1>
    <div id="tableContainer">
        <table id="tableLayout">
            <tr><td>...</td></tr>
        </table>
    </div>
</div>

El único problema es que tanto los div contenedores como los divs tableContainer deben tener una posición absoluta. No estoy seguro de si esto funcionará para tu diseño.