युक्त div बच्चों

Question

एचटीएमएल

<div id='container'> 
    <div id='left'>Left content</div> 
    <div id='right'>Right content</div> 
</div> 

और सीएसएस देखते हुए

#container { 
    border:solid 3px red; 
} 

#left { 
    float: left; 
    background-color: lightblue; 
    height: 300px; 
} 

#right { 
    float: left; 
    background-color: coral; 
    height: 300px; 
} 

(http://jsfiddle.net/ericjohannsen/JCPEH/1/ देखें) की तुलना में छोटे शून्य ऊंचाई, साथ ही सीमा)? मुझे उम्मीद है कि यह बच्चे div एस जितना लंबा होगा उतना लंबा होगा।

इसे स्थापित करने का सही तरीका क्या है ताकि div दोनों बच्चों को बच्चों के समान लंबा हो?

Answer 1

आप अपने तैरता स्पष्ट करने की जरूरत है। आप इसे एक स्पष्टफिक्स कक्षा या समाशोधन तत्व के माध्यम से कर सकते हैं।

सीएसएस

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    *zoom: 1; 
} 

एचटीएमएल

<div id='container' class="clearfix"> 
    <div id='left'>Left content</div> 
    <div id='right'>Right content</div> 
</div> 

या

सीएसएस

.clear { 
    clear:both; 
} 

एचटीएमएल

<div id='container'> 
    <div id='left'>Left content</div> 
    <div id='right'>Right content</div> 
    <div class="clear"><!-- --></div> 
</div> 

अपडेट किया गया फिडल: http://jsfiddle.net/JCPEH/5/

Answer 2

ऐसा इसलिए है क्योंकि floats लेआउट का हिस्सा तब तक नहीं है जब तक उन्हें साफ़ नहीं किया जाता है।

Answer 3

ए float कुछ अन्य "आदेश" (जैसे स्थिति सापेक्ष/पूर्ण/ठीक) की तरह सामान्य प्रतिपादन प्रवाह से तत्व को हटा देता है।
एक परिणाम, यह अब प्रतिपादन के अपने मूल तत्व तरीके को प्रभावित नहीं कर रहा है।

You can enlighten yourself here

Answer 4

बड़ा div एक <div id="clear"></div> और सीएसएस में जोड़ने #clear जोड़ने बंद करने से पहले {clear: both;}

Answer 5

कंटेनर के लिए पूर्ण करने के लिए स्थिति, इससे समस्या ठीक हो सेट करें। http://jsbin.com/ifojug/1/ jsfiddle किसी कारण से मेरे ब्राउज़र पर काम नहीं करता