Why do my divs appear "inline"?

Question

Update: Why the divs are appearing as they do is more important than how to remove the problem. If I don't know why the divs are appearing the way they do I won't get an understanding of how the divs work.

---

I have two div's: menuContainer and top, and they are wrapped in another div called topContainer.

I want menuContainer and top to be under one another vertically, not on the X angle (and I thought it was standard for divs to appear under one another) but they appear both on top of each other and "inline".

This is what it looks like in my browser (yes I've f5:ed and the fiddle shows the same thing):

menuContainer is a wrapper for a horizontal CSS menu. I want it to appear as tabs on top of the white area that is top

Why are the divs appearing "inline" (look at where hello is located) and how do I edit it to look like I want it to?

body {
  background-color: #c2b074;
  color: #40371c;
  margin: 0px;
  font-family: Calibri;
}
/* Menu CSS */

#menuContainer {
  margin: 4em auto;
  background-color: #000000;
  width: 600px;
}
#navMenu {
  margin: 0px;
  padding: 0px;
}
#navMenu ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  background-color: #d4cbab;
}
#navMenu li {
  display: inline;
}
#navMenu a {
  float: left;
  text-decoration: none;
  color: #40371c;
  width: 6em;
  padding: 0.3em;
  margin: 0 1.2em 0 0;
  background-color: #d4cbab;
  border-radius: 10px 10px 0px 0px;
}
#navMenu a:hover,
#navMenu a#cart:hover,
#navMenu a#contact:hover,
#navMenu a#home:hover {
  background-color: #efefef;
  color: #40371c;
}
#navMenu a#current {
  background-color: #efefef;
}
#navMenu a#contact {
  background-color: #d4cbab;
}
#navMenu a#cart {
  background-color: #6a6145;
  color: #c2b074;
}
#navMenu a#home {
  background-color: #40371c;
}
/* Top content CSS */

#top {
  clear: left;
  width: 650px;
  height: 100px;
  margin: 0 auto;
  background-color: #efefef;
  border-radius: 10px 10px 0px 0px;
}

<div id="topContainer">
  <div id="menuContainer">
    <div id="navMenu">
      <ul>
        <li>	<a href="index.html" id="current">Home</a>

        </li>
        <li>	<a href="#" id="contact">Contact</a>

        </li>
        <li>	<a href="#" id="cart">Cart</a>

        </li>
      </ul>
    </div>
  </div>
  <div id="top">
    Hello
  </div>
</div>

The tutorial the CSS menu is based on is this one.

Answer 1

How to properly setup horizontal navigation using CSS? here's a demo: jsBin demo

Your #top is Escaping Margins
due the collapsed (but with margins) previous element #menuContainer. Collapsed due the use of inner floated LI elements.

I've created a small demo (with less code) that reflects your issue; and 3 solutions

jsBin demo

<div id="parent">

  <div id="nav">
    <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
    </ul>
  </div>

  <div id="top">TOP ELEMENT</div>

</div>

/* Follow the steps. */
#parent{
  background:red; /* red color is visible cause #top has non-floated content */
}
#nav {
  background:gold;
  /* Can you see any GOLD background? 
     NO! cause UL height collapsed cause of floated LI
     So did the #nav height*/
}
#nav ul {
  padding:0;
  margin:0;
  background: #000;
  /* Can you see any BLACK background? NO!
     cause floated LI made the UL collapse */
}
#nav li {
  float:left; /* This line made UL collapse */
}
#nav{ /* (#nav again, I know, it's just to keep-on with steps) */
  /* margin:4em auto; /* Uncomment this line to add the margins */
      /* See the issue now? #nav is height 0 cause everything inside #nav is
      collapsed so #top moved to the nearest available position. */
  /* overflow:auto;   /* Uncomment this line to fix */
}
#top{
  clear:left;
}
/* Solutions:
1) instead of using floated LI make the `display:inline-block;`
2) don't set margin to #nav
3) set overflow:auto to #nav
4) Set height to the collapsed #nav but you'll get again issues if you make your design responsive. */

Worth noting that clear:left; (on the #top element) is not needed in case you use the LI set to inline-block or you use the overflow:auto; trick.