Divs stacking above each other in the wrong order - html

Question

I have a main div with 2 divs inside it, and a secondary div. To get the divs inside the main to be in the poisition i wanted them to be i set position to relative and it worked but the secondary div is now above the main div(in the browser) for some reason. I probably used position wrong, if someone can correct my it will help me a 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 my mistake?

Answer 1

You need to wrap a clearfix around the 2 floating divs. Also, display inline-block is used instead of floating, not in additon too. You also have a typo in your css "displayLinline-block;" but that could just be your example.
You can make a new class like such:
.cf:after { visibility:hidden; display:block; content:"" ; clear:both; height:0px;}
and then wrap all your floated elements in a classed called "cf" and this will fix your issue.
<div class="cf">
<div class="fleft"> this is a div floating left </div>
<div class="fright"> this is a div floating right </div>
</div> <!-- //clearfix -->
<div> another div with more content that is not interferred with content above. </div>

Answer 2

It's not entirely clear what look you are trying to achieve but it sounds as though you need to clear the floats.
There are multiple methods of clearing which are detailed in THIS Stack Overflow question
#left,
#right,
#subDiv {
height: 50px;
}
#left {
float: left;
width: 50%;
background: red;
}
#right {
float: left;
width: 50%;
background: blue;
}
#subDiv {
background: green;
clear: both;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>

Answer 3

Clear divs of floats. Also, be careful that you have a typo in the CSS. "displayLinline-block".