दो divs: एक तय, अन्य फैला

Question

मैं यह पूरा करने के कोशिश कर रहा हूँ:

लेकिन मैं मुसीबत अच्छा खेलने के लिए दो मध्य divs हो रही हो रहा है। यदि मैं उन्हें दोनों को एक सापेक्ष संख्या (30% और 70%) पर सेट करता हूं तो यह "काम करता है" लेकिन बाएं div आकार बदलता है क्योंकि उपयोगकर्ता ब्राउज़र-विंडो चौड़ाई बदलता है।

#floatitleft{width:30%; float:left;} 
#floatitright{width:70%; float:left;} 

मैं है क्या चाहते हैं, के रूप में चित्र दिखाता है

#floatitleft{width:300px; float:left;} 
#floatitright{width:100%; float:left;} 

लेकिन इस "floatitright" floatitleft नीचे अंत का कारण बनता है। और अगर मैं इसे 70% पर सेट करता हूं तो यह "फ्लोटिटैब" के दाईं ओर समाप्त होता है, लेकिन जैसे ही मैं ब्राउज़र आकार बदलता हूं, यह फिर से नीचे समाप्त होता है। क्या करें?

अद्यतन: अंततः मैं के साथ समाप्त हुआ:

#topper{ 
    height:100px; 
    width:100%; 
    background-color:blue; 
} 
#wrapperz{ 
    height:inherit; 
    width:100%; 
} 
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;} 
#wrapperz #floatitleft{ 
    width:300px; 
    float:left; 
} 
#wrapperz #floatitright{ 
    margin-left: 300px; 
    min-width:300px; 
} 
#bottommer{ 
    height:100px; 
    width:100%; 
    background-color:red; 
} 

कौन सा रूप में इस्तेमाल किया जाएगा: है कि इस उचित HTML नहीं है

<div id="topper"> 
test 
</div> 

<div id="wrapperz"> 

<div id="floatitleft"> 
<p> Stuff </p> 
</div> 

<div id="floatitright"> 
<p> Stuff </p> 
</div> 

<div style="clear: both;"/> 

</div> <!-- Close Wrapper --> 

<div id="bottommer"> 
test 
</div> 

नोट लेकिन यह सिर्फ करने के लिए समाधान के रूप में कार्य करता है मेरी उदाहरण। साथ ही, "div style =" clear: "विशेष रूप से महत्वपूर्ण है यदि आप इसे आजमाते हैं क्योंकि पाउडर को गड़बड़ करने के लिए फुटेज का उपयोग नहीं किया जाता है क्योंकि रैपर लंबवत रूप से लंबवत नहीं होता है। लेकिन मार्क ने जो कुछ भी मुझे विश्वास दिलाया है बेहतर/क्लीनर नीचे विकल्प बस हो।

Answer 1

क्या यह काम इरादा के रूप में नहीं होगा?

#floatitleft{ 
    width:300px; 
    float:left; 
} 
#floatitright{ 
    margin-left: 300px; 
} 

Answer 2

आपको लगता है कि बहुत आसान का उपयोग कर ग्रिड प्रणाली पूरा कर सकते हैं।

http://960.gs/

एक नजर डालें, तो आप एक 12 या 16, 24 या इससे भी अधिक कॉलम चुन सकते हैं। आप आपको आवश्यक चौड़ाई के आधार पर "grid_4", "grid_8" जैसी कक्षाओं का उपयोग करें।

Answer 3

यहाँ, मैं अपनी तस्वीर का डुप्लिकेट बनाया: jsbin.com/ipexep/3 (ऊपरी दाएं भाग में क्लिक करें "संपादित करें jsbin में" को देखने और स्रोत को संपादित करने)

मैं के लिए

शीर्ष और निचले वर्गों की ऊंचाई, मैंने उनके लिए ऊंचाई ली है जिसे आपने चित्र में रखा था।

नोट: मैंने प्रत्येक अनुभाग को पूरी तरह से तैनात करके और अपने शीर्ष, नीचे, बाएं या दाएं विशेषताओं को तदनुसार सेट करके किया।

इसके अलावा, ध्यान दें कि मेरी विधि प्रत्येक स्क्रीन आकार से मेल खाती है। मैंने इसे उस क्षेत्र में छीन लिया है जिसे आपने आयाम निर्दिष्ट नहीं किया है। (हेडर और पाद लेख को छोड़कर ऊंचाई आयाम की आवश्यकता है, इसलिए मैंने अनुमान लगाया है क्योंकि आपने निर्दिष्ट नहीं किया है)