¿Cómo colocar div en la parte inferior de otro div?

Question

Hola,

súplicas a echar un vistazo a esto: http://jsfiddle.net/snowman/hxXJh/

¿Cómo realizo el adInfoBox1 en la parte inferior del contenedor?

Tenga en cuenta que el contenedor no tendrá una altura fija.

BestRegards fuerte de texto

Answer 1

Puede utilizar position: absolute.

.container 
{ 
    height: 400px; 
    position: relative; 
} 

.adInfoBox1 { 
    padding: 5px 5px 5px 10px; 
    position: absolute; 
    bottom: 0px; 
    width: 457px; 
    background-color: green; 
} 

.adRegularList .categoryList { 
    bottom: 0; 
    height: 16px; 
    position: absolute; 
} 

Ver un ejemplo de trabajo aquí: http://jsfiddle.net/hxXJh/5/

Answer 2

cambio el css de adInfoBox1 a:

.adInfoBox1 { 
    float: left; 
    padding: 5px 5px 5px 10px; 
    position: absolute; 
    width: 457px; 
    background-color : green; 
    bottom: 0; 
} 

Answer 3

te sugiero:

.adInfoBox1 { 
    padding: 5px 5px 5px 10px; 
    position: absolute; 
    bottom: 0; /* attaches the element to the bottom */ 
    left: 0; /* attaches the element to the left-side */ 
    right: 0; /* attaches the element to the right-side */ 
    background-color : green; 
} 

Lo anterior dará la .adInfoBox 100% de ancho, implícitamente. Esto se puede ajustar eliminando o corrigiendo las declaraciones right o left. Eliminé el float porque usar position: absolute; eliminará el elemento del flujo de documentos de todos modos.

JS Fiddle demo.

Answer 4

Solución simple y complicada. Div2 estará en la parte inferior del contenedorDiv.

<div id="containerDiv"> 
    <div id="div1" style="heigth:90%;"></div> 
    <div id="div2">Content here...</div> 
</div>