मेरे divs ओवरलैपिंग क्यों हैं?

Question

मैं एक सूची तत्व के अंदर एक मूल div बनाने की कोशिश कर रहा हूं जिसमें बाएं और दाएं के लिए दो बच्चे div शामिल हैं। बाएं में एक छवि होगी और दाईं ओर दो अतिरिक्त divs होंगे जिनमें कुछ टेक्स्ट और टाइमस्टैम्प होगा।

मुझे ओवरलैपिंग के बिना बाएं और दाएं divs प्रदर्शित करने के लिए नहीं मिल सकता है।

मेरे एचटीएमएल इस तरह लग रहा है:

<ul class="activity-comments"> 
<li> 
<div style="border: solid 1px #ff0000;"> 
    <div style="float:left;border: solid 1px #0000ff;"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"> 
    </div> 
    <div> 
    <small>Some sample text here 1</small> 
    </div> 
    <div> 
    <small>Posted 1 day ago</small> 
    </div> 
</div> 
</li> 
<li> 
<div style="border: solid 1px #ff0000;"> 
    <div style="float:left;border: solid 1px #0000ff;"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"> 
    </div> 
    <div> 
    <small>Some sample text here 2</small> 
    </div> 
    <div> 
    <small>Posted 2 days ago</small> 
    </div> 
</div> 
</li> 
</ul> 

इस jsfiddle

पर एक नज़र मैं क्या याद आ रही है ले लो?

Answer 1

वे अतिव्यापी हैं क्योंकि आप एक div तैर रहे हैं, लेकिन फ्लोट को साफ़ नहीं कर रहे हैं।

फ्लोट को साफ़ करने के लिए clearfix विधि का उपयोग करें। एक वर्ग container अपने कंटेनर divs में जोड़े और प्रयोग इस सीएसएस:

http://jsfiddle.net/57PQm/7/

.container { 
    border: solid 1px #ff0000; 
    zoom: 1; /* IE6&7 */ 
} 

.container:before, 
.container:after { 
    content: ""; 
    display: table; 
} 

.container:after { 
    clear: both; 
} 

आप यह भी देखेंगे कि मैं अपने इनलाइन सीएसएस हटा दिया है। यह आपके कोड को बनाए रखने में आसान बनाता है।

Answer 2

मुझे आश्चर्य है कि अगर यह है कि आप क्या देख रहे हैं: jsfiddle

मैं img{display:block;} में जोड़ा के रूप में छवियों को कुछ छिपा गद्दी कि elemets नीचे shoves साथ आते हैं।

Answer 3

आपका थंबनेल तस्वीर को 41px की विशिष्ट ऊंचाई पर सेट कर रहा है। या तो तस्वीर का आकार बदलें, या div आकार बदलें या बाहरी div के अतिप्रवाह सेट करें।