पैरेंट रैपर div में शीर्ष पर दो इनलाइन-ब्लॉक लाइन क्यों नहीं हैं?

Question

मैं इस

<div id="wrapper"> 
    <div id="main"> 
     <p>test</p> 
    </div> 
    <div id="sidebar"> 
     <p>test</p> 
    </div> 
</div> 

और सीएसएस की तरह मेरे एचटीएमएल

#wrapper { 
    width: 960px; 
    margin: 0px auto; 
} 

#main { 
    width: 790px; 
    display: inline-block; 
    padding: 0px; 
    margin: 0px; 
} 

#sidebar { 
    width: 170px; 
    display: inline-block; 
    vertical-align: top; 
    padding: 0px; 
    margin: 0px; 
} 

उदाहरण: http://jsfiddle.net/Hpwff/

समस्या यह है कि भले ही दोनों divs का योग 960px, जो एक ही चौड़ाई है माता-पिता के कंटेनर (#wrapper) के रूप में, वे एक दूसरे के बगल में तैरते नहीं हैं। मुझे या तो साइडबार या मुख्य कंटेनर चौड़ाई को 4px से कम करना है ताकि वे फिट हो जाएं। यह क्यों है, और इसके आसपास एक रास्ता है?

Answer 1

आप दो div रों के बीच एक नई पंक्ति है, चूंकि वे inline-block हैं, इसलिए उनके बीच की नई जगह एक स्थान के रूप में प्रस्तुत की जाती है। Without space यह आपकी अपेक्षा के अनुसार काम करता है।

Answer 2

फ्लोट जोड़ें: बाएं; प्रत्येक div के लिए और यह काम करता है जैसे यह चाहिए! updated jsFiddle

अपडेट किया गया कोड:

#wrapper { 
    width: 960px; 
    margin: 0px auto; 
} 

#main { 
    width: 790px; 
    display: inline-block; 
    padding: 0px; 
    margin: 0px; 
    float: left; 
} 

#sidebar { 
    width: 170px; 
    display: inline-block; 
    vertical-align: top; 
    padding: 0px; 
    margin: 0px; 
    float: left; 
}​ 

Answer 3

इसे देखें: jsfiddle। आपको फ्लोट जोड़ने की आवश्यकता है: अपने मुख्य और साइडबार ब्लॉक पर छोड़ दें। और उनके बाद स्पष्ट ब्लॉक जोड़ें।

Answer 4

<div id="wrapper"> 
    <div id="main"> 
     <p>test</p> 
    </div><div id="sidebar"> 
     <p>test</p> 
    </div> 
</div> 

</div> और <div>

Answer 5

यह पुराने चाल में से एक है के बीच कोई स्थान नहीं - आप के लिए बच्चों में से प्रत्येक के 0px को रैपिंग कंटेनर (#wrapper) का फ़ॉन्ट आकार सेट करें और फिर करने की जरूरत है जो कुछ भी आपको आवश्यक फ़ॉन्ट आकार।

यह चाल लगभग सभी ब्राउज़रों पर काम करती है। हालांकि, इस बार यह आईई नहीं है, बल्कि सफारी जो सेटअप को स्वीकार करने में असफल रहा है।

तो कोड इस तरह दिखना चाहिए:

#wrapper { 
    width: 960px; 
    margin: 0px auto; 
    font-size:0px; 
} 

#main { 
    width: 790px; 
    display: inline-block; 
    padding: 0px; 
    margin: 0px; 
    font-size:16px; 
} 

#sidebar { 
    width: 170px; 
    display: inline-block; 
    vertical-align: top; 
    padding: 0px; 
    margin: 0px; 
    font-size:16px; 
}​ 

आप इसे अपने पहले से बनाए jsfiddle पर परीक्षण कर सकते हैं, यह अच्छी तरह से काम करता है।