मैं इन divs को ओवरलैपिंग से कैसे रोकूं?

Question

मेरे पास एक सामग्री div के भीतर तीन divs हैं।

कंटेनर चौड़ाई 70%। इसके भीतर मेरे पास -Left, चौड़ाई 20% है। -सामग्री, चौड़ाई 60%। -राइट, चौड़ाई 20%।

मैं कंटेनर को पृष्ठ की चौड़ाई का 70%, और आंतरिक (बाएं, सामग्री, और दाएं) को 20%, 60% और 20% कंटेनर div लेने के लिए लेना चाहता हूं।

मैंने यहां अन्य प्रश्नों का प्रयास किया है, मैंने Google की कोशिश की है, लेकिन सही जवाब नहीं मिल रहा है। कृपया उन्हें ओवरलैपिंग से रोकने में मेरी सहायता करें।

लेकिन जब मैं आकार फिर से ब्राउज़र, divs ओवरलैप।

यहाँ प्रासंगिक सीएसएस कोड है:: इस तरह

#container{ 
    width: 70%; 
} 
#left { 
    float: left; 
    width: 20%; 
    min-width: 200px; 
} 
#content { 
    float: left; 
    width: 60%; 
    min-width: 600px; 
} 
#right { 
    float: right; 
    width: 20%; 
    min-width: 200px; 
} 

Answer 1

बस अपने सीएसएस से min-width हटाएं! और min-width को margin: auto के साथ कंटेनर में केंद्र बनाने के लिए दें।

#container{ 
    width: 70%; 
    min-width: 1000px; 
    margin: auto; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

यहाँ बेला की जाँच करें::

इस सीएसएस का प्रयास करें, http://jsfiddle.net/UaqU7/2/

Answer 2

न्यूनतम-चौड़ाई सीएसएस बाहर ले।

एक बार खिड़की की चौड़ाई एक निश्चित आकार से नीचे हो जाने के बाद, उन तत्वों के पास ओवरलैप करने के अलावा कोई विकल्प नहीं है। मान लें कि आपकी विंडो 1000px है; तो कंटेनर 700px होगा। लेकिन न्यूनतम चौड़ाई के साथ, कंटेनर में divs पहले से ही 1000px पर हैं, कंटेनर बहती है।

Answer 3

आपको अपने सीएसएस से min-width निकालना होगा।

जब पृष्ठ छोटा होता है तो min-width इसे किसी भी आगे घटने से रोकता है। इस प्रकार ओवरलैप का कारण बनता है।

Answer 4

ये रहा, यदि आप एक मिनट चौड़ाई चाहते कंटेनर

http://jsfiddle.net/VBSYu/1/

#container{ 
    width: 70%; 
    min-width: 1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
}​ 

पर सेट

Answer 5

मीटर देने के बजाय बच्चे डीआईवी के में आप इसे #container पर दे सकते हैं। इस तरह लिखें:

#container{ 
    width: 70%; 
    min-width:1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

चेक इस http://jsfiddle.net/yLVsb/

Answer 6

यहाँ बेला है अपनी कार्यशील ठीक http://jsfiddle.net/r42hH/2/