छोड़ दिया हो रही है और सही ढेर

Question

के बजाय ओवरलैप यह समझाने की तुलना में दिखाने के लिए आसान है तैरता: http://jsfiddle.net/gN4VZ/

मेरा अधिकार-जारी सामग्री (नीला) मेरी बाएं जारी सामग्री ओवरलैप करने के लिए क्या यह संभव है (लाल) इसके नीचे ढेर के बजाय जब दोनों कंटेनर चौड़ाई से अधिक गठबंधन करते हैं?

Answer 1

आप absolute positioning का उपयोग कर सकते हैं।

के बजाय float:right उपयोग position:absolute; right:0; और बदले float:left उपयोग position:absolute; left:0;

की अपने माता पिता DIVs पर position:relative; स्थापित करने के लिए इतना है कि पूर्ण स्थिति उनके संबंधित कंटेनरों के बजाय पृष्ठ के सापेक्ष है सुनिश्चित करें।

Answer 2

.box वर्ग position:relative पर सेट के साथ पूर्ण स्थिति का उपयोग करें।

http://jsfiddle.net/gN4VZ/1/

ध्यान दें कि मैं हर .box पर एक ऊंचाई निर्धारित करने के लिए इतना है कि यह wouldnt ओवरलैप ऊपर/नीचे था।

अपने नए सीएसएस होगा

.bar { 
    border:solid 1px black; 
    color:white; 
    position:relative; 
    height:40px; 
} 
.clear { 
    clear:both; 
} 
.left-bar { 
    background:red; 
    height:40px; 
    position:absolute; 
    left:0; 
} 
.right-bar { 
    background:blue; 
    position:absolute; 
    right:0; 
    height:40px; 
}​ 

---

के रूप में सुझाव द्वारा मेरे सिर में दर्द है, तो आप सिर्फ सही है, जो बाहरी div पर ऊंचाई की आवश्यकता समाप्त स्थिति सकता है।

http://jsfiddle.net/gN4VZ/2/