Divs stacking above each other in the wrong order

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?

Your HTML doesn't look correct if you want the three floated next to eachother. You need to wrap all the divs in a parent container and clear it — Gerico, Jul 17 '15 at 14:43
I'm sorry, english isnt my native language so i had trouble explaining myself properly. still, thanks for all the help, and also i want to say that the downvotes are very not nice. I'm just a kid trying to learn how to build a website and because my questions are too easy or stupid or i dont know what its not fair and also later i cant ask more questions that will help me learn more and get better which i think that is the purpose of this website. Please be thoughtful when down voting a post. thanks for all the help — omriws, Jul 17 '15 at 16:56

score 0 · Answer 1 · edited May 23 '17 at 12:14

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>

score 0 · Accepted Answer · answered Jul 17 '15 at 14:43

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>

score 0 · Answer 3 · answered Jul 17 '15 at 14:48

0

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

answered Jul 17 '15 at 14:48

1x2x3x4x

592
8
26

Divs stacking above each other in the wrong order

3 Answers3