¿por qué mi contenido se muestra fuera del div?

Question

Tengo una "burbuja" con contenido, que funciona bien. Ahora, quiero mostrar un recuento (2 líneas) que siempre debe estar en la esquina inferior derecha de ese div, DENTRO de él. Probé muchas cosas, pero por alguna razón siempre superpone el div y muestra afuera. ¿Qué estoy haciendo mal?

<style type="text/css"> 
body{ 
background-color:#f3f3f3; 
} 
.commentbox{ 
background-color: #ffffff; 
width: 200px; 
border-color: #D1D1D1; 
border-radius: 4px; 
border-style: solid; 
border-width: 1px; 
padding-bottom: 9px; 
padding-left: 9px; 
padding-right: 9px; 
padding-top: 9px; 
position:relative; 
} 
.count{ 
float:right; 
text-align:right; 
} 
</style> 

<div class="commentbox"> 
<div class="title">Some several lines long long long long content text goes here 
</div> 
<div class="count">123<br>456</div> 
</div> 

Answer 1

Usted está flotando .count por lo que no influye en él es la altura del contenedor primario.

Establezca overflow: hidden en el elemento principal (.commentbox) o use one of the other float containing techniques para que lo haga.

Answer 2

Dado que ya está usando position:relative en el div principal. Tal vez puedas probar:

.count { 
    position:absolute; 
    right:0; 
    bottom:10px; 
} 

Answer 3

Probablemente tiene que agregar un claro después de la div "conteo".

<style type="text/css"> 
body{ 
background-color:#f3f3f3; 
} 
.commentbox{ 
background-color: #ffffff; 
width: 200px; 
border-color: #D1D1D1; 
border-radius: 4px; 
border-style: solid; 
border-width: 1px; 
padding-bottom: 9px; 
padding-left: 9px; 
padding-right: 9px; 
padding-top: 9px; 
position:relative; 
} 
.count{ 
float:right; 
text-align:right; 
} 
</style> 

<div class="commentbox"> 
<div class="title">Some several lines long long long long content text goes here 
</div> 
<div class="count">123<br>456</div> 
<div style="clear: both"></div> 
</div> 

Answer 4

lo que realmente necesita para float: right;.count? Creo que text-align debería ser suficiente para el diseño deseado.