मेरी सामग्री div के बाहर क्यों दिख रही है?

Question

मेरे पास सामग्री के साथ "बबल" है, जो ठीक काम कर रहा है। अब, मैं एक गिनती (2 लाइनें) प्रदर्शित करना चाहता हूं जो हमेशा उस div के निचले दाएं कोने में रहें, इसके अंदर। मैंने कई चीजों की कोशिश की लेकिन किसी कारण से यह हमेशा 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> 

Answer 1

आप तैर रहे हैं .count तो यह यह पैरेंट कंटेनर की ऊंचाई है को प्रभावित नहीं करता।

पैरेंट पर overflow: hidden सेट करें (.commentbox) या one of the other float containing techniques का उपयोग करें ताकि यह किया जा सके।

Answer 2

चूंकि आप पहले से ही पैर div पर position:relative का उपयोग कर रहे हैं। ऐसा करें:

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

Answer 3

शायद आपको "गिनती" 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

तुम सच में .count के लिए float: right; की ज़रूरत है? मुझे लगता है कि text-align वांछित लेआउट के लिए पर्याप्त होना चाहिए।