सीएसएस उत्तरदायी फ्लोट बाएं और दाएं (बदलें कि कौन सा div शीर्ष पर जाता है)?

Question

मैं इस पृष्ठ पर काम कर रहा हूँ: http://www.insidemarketblog.com/test-4/

आप देखेंगे कि शब्द "परीक्षण" div में है मंगाई छोड़ दिया, और में div सही जारी छवि है।

यदि आप इसका आकार बदलते हैं, तो आप देखेंगे कि बाईं तरफ तैरने वाला div शीर्ष पर चला जाता है, और नीचे वाला div नीचे चला जाता है।

आप उस आदेश को कैसे बदल सकते हैं? ताकि बाईं तरफ बहने वाला div नीचे चला गया हो। ऐसा लगता है कुछ काम नहीं करेगा।

HTML:

<div class="main_header"> 
<div class="banner_left"> 
<p>test</p> 
</div> 
<div class="banner_right"> 
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg"> 
</div> 
</div> 

सीएसएस:

.main_header { 
    background: none repeat scroll 0 0 #2B3443; 
    border: 1px solid #FFFFFF; 
    height: 300px; 
    margin: 0 auto; 
    overflow: hidden; 
} 
.banner_left { 
    float: left; 
} 
.banner_right { 
    float: right; 
} 

Answer 1

वांछित प्रभाव प्राप्त करने के लिए आप HTML टैग के क्रम को स्वैप कर सकते हैं।

बदलें इस:

<div class="main_header"> 
<div class="banner_left"> 
<p>test</p> 
</div> 
<div class="banner_right"> 
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg"> 
</div> 
</div> 

इस के लिए

:

<div class="main_header"> 
<div class="banner_right"> 
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg"> 
</div> 
<div class="banner_left"> 
<p>test</p> 
</div> 
</div> 

Answer 2

उन दोनों को एक ही दिशा तैरने लगते हैं।