ओवरलैपिंग से दो divs में फ़्लोटिंग सामग्री को कैसे रोकें?

Question

एक FAQ पृष्ठ में मैं इस संरचना के साथ मैं एक पृष्ठ है बनाने के लिए कोशिश कर रहा हूँ:

<section id="container"> 

    <div id="faq_primary"></div> 
    <div id="faq_sidebar"></div> 

</section> 

<footer> 

    <div id="directory"> 

      <div id="col_a"></div> 
      <div id="col_b"></div> 
      <div id="col_c"></div> 

    </div> 

</footer> 

यहाँ प्रासंगिक सीएसएस है:

#container { 
    width:960px; 
    margin: 0px auto; 
    position:relative; 
} 

#faq_primary { 
    width:720px; 
    margin:20px 40px 0 0; 
    position:relative; 
    float:left; 
    display:inline; 
} 

#faq_sidebar { 
    left:760px; 
    position:absolute; 
} 

footer { 
    width:1111px; 
    height:250px; 
    margin:90px auto 0px; 
    position:relative; 
    background-image:url(../images/footer/bg.png); 
    color:#7d7d7d; 
} 

#directory { 
    width:960px; 
    margin:0px auto; 
    padding-top:25px; 
    font-size:13px; 
} 

#directory ul li{ 
    padding-bottom:4px; 
} 

#dir-cola, #dir-colb, #dir-colc, #dir-cold, #dir-cole { 
    width:174px; 
    height:140px; 
    float:left; 
} 

#dir-cola { 
    width:150px; 
} 

#dir-cole { 
    width:143px; 
} 

मेरे पेज की सामग्री अनुभाग container में पाया जाता है, और पाद लेख सीधे नीचे है। faq_sidebarfaq_primary से बहुत छोटा है, और क्योंकि पाद लेख में कॉलम सभी फ़्लोटिंग बाएं हैं, वे faq_prbarary के नीचे faq_primary के दाईं ओर समाप्त होते हैं।

कोई सलाह तो मैं ओवरलैपिंग से पाद लेख में सामग्री और कंटेनर को रोका जा सकता:

यहाँ एक स्क्रीनशॉट है?

Answer 1

आप एक समाशोधन div यहाँ

<div id="faq_sidebar"></div> 

<div class="clear"></div> 

</section> 

जोड़ने और फिर इस

.clear{ 
    clear:both; 
} 

की तरह इसे शैली सकता है कि ऐसा नहीं है, तो आप के बाद </section> इसे जोड़ने के लिए आवश्यकता हो सकती है

Answer 2

यदि यह एक कंटेनर में है:

<section id="container"> 

<div id="faq_primary"></div> 

<div id="faq_sidebar"></div> 

</section> 

और आप चाहते हैं कि वे इनलाइन डालें क्यों स्टाइल # कंटेनर डिस्प्ले के साथ नहीं: इनलाइन। आप #faq_sidebar के लिए पूर्ण स्थिति का उपयोग कर रहे हैं और यही कारण है कि पाद लेख सामग्री

Answer 3

एक ही सामग्री प्राप्त किए बिना जानना मुश्किल है क्योंकि जब मैं कोशिश करता हूं तो मैं स्क्रीनशॉट के समान नहीं बना सकता। (सामग्री में मतभेदों के कारण)।

लेकिन मैं यकीन है कि अगर आप कर रहा हूँ:

#container 
{ 
    // ... *snip* 
    overflow: hidden; 
} 

कंटेनर ऊंचाई के लिए इसकी गणना में शुरू बच्चों को शामिल करने के लिए कारण होगा।

इसके अलावा, मैं आप यदि आप सही पर पी की कोशिश कर रहे [यह osition right: 0 को sidbar left: ... बदलने का सुझाव देते हैं (वैकल्पिक रूप से float: right बजाय स्थिति पूर्ण की सही हो सकता है)।

संपादित करें: - मैंने देखा कि संबंधित प्रश्नों में से एक का एक ही जवाब था और मैं सुझाव दे सकता हूं कि यह एक डुप्लिकेट है। प्रश्न: Make outer div be automatically the same height as its floating content

Answer 4

clear:both; 
clear:left; 
clear:right; 

को विनियमित और में छवि पर जाने के लिए से बचने के लिए दाईं ओर या पिछले div या छवि के बाईं ओर समायोजित इस्तेमाल किया संपत्ति हैं।

Answer 5

#faq_sidebar से left:760px; हटाएं।