perché il mio contenuto viene visualizzato al di fuori del div?

Question

Ho una "bolla" con contenuto, che funziona bene. Ora, voglio mostrare un conteggio (2 righe) che dovrebbe sempre essere nell'angolo in basso a destra di quel div, ALL'INTERNO. Ho provato molte cose ma per qualche motivo si sovrappone sempre al div e mostra all'esterno. Che cosa sto facendo di sbagliato?

<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

a galleggiare .count quindi non influenza è l'altezza del contenitore principale.

Impostare overflow: hidden sul genitore (.commentbox) o utilizzare one of the other float containing techniques in modo che lo faccia.

Answer 2

Poiché si sta già utilizzando position:relative sul genitore div. Prova a modificare:

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

Answer 3

Probabilmente è necessario aggiungere un chiaro dopo il "conteggio" div.

<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

non si ha realmente bisogno per float: right;.count? Penso che text-align dovrebbe essere sufficiente per il layout desiderato.