div सामग्री मार्जिन कंटेनर

Question

मैं चल रहा हूँ धक्का एक मुद्दा है कि वास्तव में मुझे चौंकाने वाला है में।

मैं एक कंटेनर है कि मैं एक स्थिति ब्राउज़र स्क्रीन के ऊपरी दाएँ में इसे करने के लिए एक पृष्ठभूमि लागू करना चाहते हैं। अंदर div में 4em का शीर्ष मार्जिन है और यह कंटेनर div को दबा रहा है।

सीएसएस:

#container { 
background: transparent url("../images/house-bg.png") top right no-repeat scroll; 
} 

#wrapper { 
    background: #FFF; 
    width: 960px; 
    height: 600px; 
    margin: 4em auto 0; 
    border: 10px solid #C3CF21; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    border-radius: 20px; 
    -moz-box-shadow: 0 0 25px #444; 
    -webkit-box-shadow: 0 0 25px #444; 
    box-shadow: 0 0 25px #444; 
} 

HTML:

<div id="container"> 
     <div id="wrapper"> 
      <div id="header"> 

      </div> 
      <div id="main"> 

      </div> 
     </div> 
     <div id="footer"> 
      &copy; Copyright <?php echo date("Y");?> Company, Inc. 
     </div> 
    </div> 

मैं आवरण के मार्जिन के बाहर के बजाय कंटेनर div के अंदर होना चाहता हूँ।

मैं कोई लाभ नहीं हुआ कई प्रदर्शन गुण और स्थिति गुण की कोशिश की है। केवल बात यह है कि ठीक करता है यह #wrapper की शुरुआत से पहले एक " " डालने है, लेकिन यह करने के लिए एक सीएसएस ठीक हो गया है।

Answer 1

#container div के संदर्भ में "बंद" करने के लिए आप overflow:hidden जोड़ सकते हैं।

यहां, http://jsfiddle.net/kQsPR/overflow:hidden को हटाने का प्रयास करें और जैसा कि आप वर्णन करते हैं, यह व्यवहार करेगा।

यह व्यवहार यहाँ निर्दिष्ट किया जाता है: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

एक ब्लॉक स्वरूपण संदर्भ में, प्रत्येक बॉक्स के बाएं बाहरी छोर को छू लेती है धारक ब्लॉक की बाईं बढ़त (के लिए दाएँ-से-बाएँ स्वरूपण, सही किनारों स्पर्श)। यह भी तैरता की उपस्थिति में सच है (हालांकि एक बॉक्स के लाइन बक्से तैरता के कारण हटना सकता है), जब तक कि बॉक्स एक नए ब्लॉक स्वरूपण संदर्भ (जो मामले में बॉक्स ही की वजह से संकरा हो सकते हैं स्थापित करता है फ्लोट्स)।

और यह वास्तव में क्या "अतिप्रवाह" "छिपा" के अलावा अन्य (नया स्वरूपण सन्दर्भ की स्थापना) करने में सक्षम है, तो आप भी कर सकता है कि उदाहरण के लिए, अपने #container तत्व को बॉर्डर-शीर्ष जोड़कर। , ऑटो अतिप्रवाह के कारण: