सीएसएस: DIV नाव पर कोई ऊंचाई युक्त सेट

Question

मान हम इस कोड है:,

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'> 
    <div id='rightDiv' style='float:right;width:75%;'> 
     content1 
    </div> 
    <div id='leftDiv' style='float:left;width:25%;'> 
     content2 
    </div> 
</div> 
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'> 
    content3 
</div> 

जब rightDiv और leftDiv की सामग्री 200px ऊंचाई गुजरता (न्यूनतम ऊंचाई) upperDiv भी नहीं बढ़ता है तो उसकी सामग्री ओवरलैप निचला div यदि मैं बड़ी सामग्री की फ्लोट विशेषता को हटा देता हूं तो यह बढ़ता है और समस्या होगी। लेकिन मुझे नहीं पता कि कौन सा div (rightDiv या leftDiv) 200px ऊंचाई गुजरता है। मैं इसे कैसे ठीक कर सकता हूं?

धन्यवाद

Answer 1

सेट #upperDiv निम्न में से किसी:

overflow: hidden; 
width: 100%; 

या

float: left; 
width: 100%; 

या इस

#upperDiv:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

तरह सीएसएस छद्म तत्वों (IE8 + संगत) का उपयोग कर एक नियम बना

बेस्ट समाधान
निम्न जैसे पुन: प्रयोज्य वर्ग नियम बनाना।

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

अब आप इसे किसी भी कार्यक्षमता की आवश्यकता वाले किसी भी चीज़ पर लागू कर सकते हैं। उदाहरण के लिए ...

<div id='upperDiv' class="group" ... > 

पीएस यदि आपको आईई 6/7 संगतता की आवश्यकता है, तो चेकआउट this post।

Answer 2

यह जानबूझकर है क्योंकि फ्लोट पैराग्राफ में छवियों जैसी चीजों के लिए डिज़ाइन किए गए हैं (जहां एकाधिक पैराग्राफ छवि के चारों ओर लपेट सकते हैं)।

कॉम्प्लेक्स सर्पिल में fuller explanation है और क्यों एड इलियट approaches to making containers expand around floats का वर्णन करता है। मुझे लगता है कि overflow: hidden दृष्टिकोण ज्यादातर स्थितियों में सबसे अच्छा काम करता है।

Answer 3

बाद

<div id='leftDiv' style='float:left;width:25%;'> 
    content2 
</div> 

जोड़ने

 <div style="clear:both"></div> 

यह आपकी समस्या का समाधान होगा।