divs को ओवरलैपिंग से कैसे रोकें?

Question

मेरे पास कई divs हैं जो पहेली के अनुसार गोद में लगते हैं लेकिन होममिडेंटेंट div को होमबैनर div के नीचे होना चाहते हैं? कृपया मदद करे। मैं इस समस्या को कैसे खत्म करूं?

फिडल: enter link description here

मार्कअप

<div id="homecontent-mid" class="row rounded"> 
<div id="homebanner" class="rounded"> 
    <div class="sliderdiv">Slider Content</div> 
    <div class="main-search">Search Content Here</div> 
</div> 
<div id="homemidcontent" class="rounded"> 
    <div id="home-mid-mid">Mid content here</div> 
    <div id="home-mid-right">Mid Content Right here</div> 
</div> 
</div> 

सीएसएस

#homecontent-mid { 
background: url("images/bg-stage.png") repeat-y scroll right top #FFFFFF; 
border: 1px solid #BDBCBD; 
margin-top: 0; 
min-height: 100%; 
outline: medium none; 
overflow: visible; 
position: relative; 
} 

#homebanner { 
background: url("images/bg-stage-shade.png") repeat-x scroll 0 0 transparent; 
padding-right: 20px; 
position: relative; 
} 

.sliderdiv { 
background: white; 
float: right; 
} 

.main-search { 
background: none repeat scroll 0 0 #FFFFFF; 
border: medium solid #D51386; 
float: left; 
overflow: hidden; 
padding: 20px 10px; 
border-radius: 10px; 
} 

#homemidcontent { 
background: #fff; 
padding-right: 20px; 
position: relative; 
} 

#home-mid-mid { 
background: yellow; 
} 

#home-mid-right { 
background: pink; 
} 

Answer 1

कृपया चेक बेला http://jsfiddle.net/6DtSS/5/ मैं #homemidcontent को clear:both जोड़ने के बाद आप तत्वों तैरने लगते हैं, तो आप स्पष्ट करना चाहिए यह अगले तत्व के लिए अगर यह चाहता है नीचे बैठो।

z-index: 1; 

http://jsfiddle.net/djsbellini/JZAx8/

z- सूचकांक का चयन मैन्युअल आप फिर से आदेश कर सकते हैं जो एक शीर्ष पर है:

Answer 2

स्थिति आप अपने jsfiddle में ब्लॉक डाल रखते हुए, आप के साथ ऐसा कर सकते हैं।

Answer 3

You use margin in HOMEIDCONTENT CSS class and change your div position. 

homemidcontent {

background: #fff; 
    padding-right: 20px; 
    position: relative; 
    margin-top:70px;//Write this 
}