तरफ से दो divs - द्रव प्रदर्शन

Question

मैं दो divs पक्ष के पक्ष में रखने और इसके लिए निम्नलिखित सीएसएस का उपयोग करने की कोशिश कर रहा हूँ।

#left { 
    float: left; 
    width: 65%; 
    overflow: hidden; 
} 

#right { 
    overflow: hidden; 
} 

एचटीएमएल एक रैपर div में सरल, दो बाएं और दाएं div है।

<div id="wrapper"> 
    <div id="left">Left side div</div>  
    <div id="right">Right side div</div> 
</div> 

मैं भी Stackoverflow और अन्य साइटों पर एक बेहतर तरीका के लिए खोज करने के लिए कई बार कोशिश की है, लेकिन सटीक मदद नहीं मिल सका।

तो, कोड पहली नज़र में ठीक काम करता है। समस्या यह है कि बाएं div को पैडिंग/मार्जिन स्वचालित रूप से मिलता है क्योंकि मैं चौड़ाई (%) में वृद्धि करता हूं। तो, 65% चौड़ाई पर, बाएं div में कुछ पैडिंग या मार्जिन होता है और सही div के साथ पूरी तरह से गठबंधन नहीं किया जाता है, मैंने पैडिंग/मार्जिन 0 करने की कोशिश की लेकिन कोई किस्मत नहीं। दूसरा, यदि मैं पृष्ठ में ज़ूम करता हूं, तो बाएं div के नीचे दायां div स्लाइड होता है, इसकी तरल पदार्थ प्रदर्शित नहीं होती है।

नोट: मुझे खेद है, मैंने बहुत खोज की है, इस सवाल से कई बार पूछा गया है लेकिन वे उत्तर मेरी मदद नहीं कर रहे हैं, मैंने समझाया है कि मेरे मामले में क्या समस्या है।

मुझे आशा है कि इसके लिए एक फिक्स होगा।

धन्यवाद।

संपादित करें: क्षमा करें, मुझे HTML समस्या है, दोनों बाएं और दाएं किनारों में दो "बॉक्स" divs थे, वे% में पैडिंग कर रहे थे, इसलिए बाईं तरफ अधिक चौड़ाई के कारण अधिक पैडिंग दिखाया गया। क्षमा करें, इसके बाद के संस्करण सीएसएस सही, अपने तरल पदार्थ प्रदर्शन और फिक्स्ड, गलत सवाल पूछने के लिए खेद है काम करता है ....

Answer 1

मेरी वर्तमान साइट के लिए इस सीएसएस का उपयोग करना। यह सही काम करता है!

#sides{ 
margin:0; 
} 
#left{ 
float:left; 
width:75%; 
overflow:hidden; 
} 
#right{ 
float:left; 
width:25%; 
overflow:hidden; 
} 

Answer 2

Fiddle

इस बजाय की तरह एक प्रणाली का प्रयास करें:

HTML:

<section class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</section> 

सीएसएस:

.container { 
    width: 80%; 
    height: 200px; 
    background: aqua; 
    margin: auto; 
    padding: 10px; 
} 
.one { 
    width: 15%; 
    height: 200px; 
    background: red; 
    float: left; 
} 
.two { 
    margin-left: 15%; 
    height: 200px; 
    background: black; 
} 

आप केवल एक div अगर y फ्लोट करने के लिए की जरूरत है कहां पहले div की चौड़ाई के बराबर दूसरे पर मार्जिन-बाएं का उपयोग करें। इससे कोई फर्क नहीं पड़ता कि ज़ूम क्या है और इसमें उप-पिक्सेल समस्याएं नहीं होंगी।

Answer 3

यह एक flexbox करना आसान है:

#wrapper { 
    display: flex; 
} 
#left { 
    flex: 0 0 65%; 
} 
#right { 
    flex: 1; 
}