दो divs एक दूसरे से ऊपर तैरते हुए

Question

मैं दो divs को एक दूसरे के ऊपर पैरेंट div के दाईं ओर रखने की कोशिश कर रहा हूं। कुछ ऐसा:

div#top 
|-------------------------------------||------------| 
|div#parent       ||div#menu | 
|       |---------|||float:right | 
|       |div#up |||   | 
|       |   |||   | 
|       |---------|||------------| 
|          | 
|       |---------|| 
|       |div#down || 
|       |   || 
|       |---------|| 
|-------------------------------------| 

कोई विचार यह है कि सीएसएस का उपयोग करके इसे कैसे किया जाए? मैं यहां सारणी का उपयोग नहीं कर सकता क्योंकि div # up मास्टर पेज (एएसपी.नेट) में जोड़ा गया है और div # down सामग्री में जोड़ा गया है। Div # parent कुछ मिनट-चौड़ाई सेट के साथ तरल है और इसमें ऐसी सामग्री शामिल है जो इन divs द्वारा ओवरलैप नहीं की जानी चाहिए, इसलिए मुझे लगता है कि स्थिति: पूर्ण प्रश्न भी यहां से बाहर है।

एक और विवरण: div # parent के बाएं और दाएं तरफ मेनू के साथ बाएं और दाएं तरफ तैरते हैं। तो स्पष्ट जोड़ना: नीचे दाएं # दाएं # दाएं फ्लोट किए गए दाएं इसे इन मेनू में से एक के नीचे रखता है ...

Answer 1

आप यह सुनिश्चित करें कि माता-पिता ब्लॉक (आपके मामले में #parent), divs #up और #down के ब्लॉक स्वरूपण संदर्भ बन जाता है ताकि किसी भी समाशोधन केवल कि ब्लॉक स्वरूपण संदर्भ के अंदर होता है और बाहर तैरता पर ध्यान नहीं देता बनाने की जरूरत है इसका ऐसा करने का सबसे आसान तरीका आमतौर पर #parent फ्लोट को भी देना है, याके अलावा इसे overflow देना है।

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

यहाँ कुछ सबूत है कि मैं यह सही इस समय मिल गया: http://jsfiddle.net/Pagqx/

भ्रम के लिए खेद है।

Answer 2

व्यक्तिगत रूप से मैं उन्हें एक कंटेनर div में लपेटूंगा, और इसे चौड़ाई दे दूंगा और इसे सही कर दूंगा।

#sidebar{ 
    width: 250px; 
    float: right; 
} 

Answer 3

आप दोनों float:right और clear:right है, जो सुनिश्चित करता है कि तत्व के दाएँ हाथ की ओर से युक्त तत्व के किनारे तक अबाधित है उपयोग करने के लिए की जरूरत है।

<div id="parent" style="width: 80%"> 

    <div id="up" style="float: right; clear: both;">div with id 'up'</div> 
    <div id="down" style="float: right; clear: both;">div with id 'down'</div> 
    'parent' div 

</div>