सीएसएस पोजिशनिंग तत्व एक दूसरे के बगल में

Question

मुझे आश्चर्य है कि क्या आप मुझे दो divs, mainContent और sideContent को एक-दूसरे के बगल में रखने में मदद कर सकते हैं?

HTML:

<div id='main'> 
    <div id='mainContent'> 
    </div> 
    <div id='sideContent'> 
    </div> 
</div> 

सीएसएस: #

#main { width: 100%; min-height: 400px; 
    background: #0A3D79; /* for non-css3 browsers */ 
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(20,114,199)), to(rgb(11,61,122))); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, rgb(20,114,199), rgb(11,61,122));} /* for firefox 3.6+ */ 
    /*gradient code from http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient*/ 

    #mainContent { width: 75%; margin-top: 20px; padding-bottom: 10px; min-height: 400px; background-color: blue; } 
    #sideContent { width: 22%; margin-top: 20px; padding-bottom: 10px; min-height: 400px; background-color: red; border-style: solid; border-left-width: 3px; border-left-color: white;border-right-width:0px;border-top-width:0px;border-bottom-width:0px;} 

मैं सीएसएस के सभी शामिल है, क्योंकि मुझे यकीन है कि वास्तव में बात यह है कि इस तरह की पर एक प्रभाव है क्या नहीं था। इसके अलावा, मैंने साइडकंटेंट और मुख्य सामग्री प्रदर्शित करने की कोशिश की है लेकिन वे गायब होने लगते हैं। कोई विचार क्यों?

Answer 1

यदि आप उन्हें एक तरफ प्रदर्शित करना चाहते हैं, तो मुख्य सामग्री का पक्ष क्यों है? उन्हें भाई बहन बनाते हैं:

float:left; display:inline; width: 49%; 

दोनों में से।

#mainContent, #sideContent {float:left; display:inline; width: 49%;} 

Answer 2

float संपत्ति का प्रयास करें। यहां एक उदाहरण दिया गया है: http://jsfiddle.net/mLmHR/

Answer 3

आप कैसे कई तत्वों का उपयोग किया जाएगा पता नहीं है, या उन्हें सामान्य चौड़ाई करना चाहते हैं, का एकमात्र अन्य तरीका तालिका का उपयोग करने के लिए है: में

<div id='main'> <table> <tbody> 
    <tr> 
    <td><div id='mainContent'></div></td> 
    <td><div id='sideContent'></div></td> 
    </tr> 
</tbody> </table> </div>