html - Divs stacking above each other in the wrong order -

i have main div 2 divs inside it, , secondary div. divs inside main in poisition wanted them set position relative , worked secondary div above main div(in browser) reason. used position wrong, if can correct me lot.

    #main {        position: relative;      }      #right {        float: right;        position: relative;        display: inline-block;      }      #left {        float: left;        position: relative;        displaylinline-block;      }      #subdiv {        position: relative;      }

<div id="main">    <div id="left">    </div>    <div id="right">    </div>  </div>  <div id="subdiv">  </div>

browser shows:

<div id="subdiv"> </div> <div id="main"> <div id="left"> </div> <div id="right"> </div> </div> 

what's mistake?

you need wrap clearfix around 2 floating divs. also, display inline-block used instead of floating, not in additon too. have typo in css "displaylinline-block;" example.

you can make new class such:

.cf:after { visibility:hidden; display:block; content:"" ; clear:both; height:0px;} 

and wrap floated elements in classed called "cf" , fix issue.

<div class="cf"> <div class="fleft"> div floating left </div> <div class="fright"> div floating right </div> </div> <!-- //clearfix -->  <div> div more content not interferred content above. </div>