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.

Answer 2

you should really just remove the floats. You don't need them. You can accomplish the same thing with display: inline-block:

FIDDLE

CSS

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

#menuContainer {
  margin: 4em auto 0;
  width: 600px;
}

#navMenu {
  margin: 0px;
  padding: 0px;
}

#navMenu ul {
   margin: 0 0 0 20px;
   padding: 0px;
   list-style-type: none;
   text-align: left;
}

#navMenu li {
  display: inline-block;
}

#navMenu a {
  display:block;
  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 {
   width: 650px;
   height: 100px;
   margin: 0 auto;
   background-color: #efefef;
   border-radius: 10px 10px 0px 0px;
}

UPDATE

The issue has nothing to do with margin as some others are proclaiming. Change the margin all you want, if you inspect .menuContainer in developer tools you will see it still has a height of 0. It's collapsed because of the floats. Just remove the floats like I have done in my example and it will work perfectly fine. It's not structured correctly anyways, you have the float on the a tag but their parent the li is the one that needs to be floated or inline. So calling inline on the lis and float: left on the a's is unnecessary.

SCREEN SHOTS

This first shot is your code, with only the margins removed, as you can see it has a height of 0:

This is my code, with no floats, the ul is not collapsed and has a height of 27px:

WRAP UP

SO the issue is not the floats but the way you are using them. The floats should have been added to the parent of a (which is li). The li elements are what needs to be inline. But because of the way your CSS was structured around those floats, your styles got messed up after removing them. I had to restructure a hand full of your CSS classes to get the desired result. In the future be sure that the floats are added to the elements that need to be inline, not their children.

Answer 3

you need to change the margin its overlap to next div

#menuContainer {
    background-color: #000000;
    margin: 4em auto 0;/*changes*/
    width: 600px;
}

Answer 4

Now, just for the sake of writing the answer I wanted to read (and hopefully can help other people learn what just happened here)

The quick fix

Removing the margin from menuContainer and adding it to topContainer will "solve" the problem visually and "look" as you want it to, but it's still bad code as the reason for the behavior is still there.

Why does margin trigger the behavior?

The problem (which we'll get to below) is triggered because the margin pushes the menu down, and when the content in top is being pushed upon, it will find a space to appear where there is one.

The problem

The piece of code that causes this mess:

#navMenu a {
    float: left;
}

The issue here is that the element a has gotten all the properties, for no good reason. And what happens here is that it collapses the parent element. A collapse makes the entire element "unseen" and useless.

What float does is that it removes the standard block-property that normally makes up the behavior for the li elements, and it causes the a elements to gather on one line. This is the desired effect, but it also collapses the parent element li, which looks like this:

#navMenu li {
    display: inline; /*This doesn't do anything because of the collapse!*/
}

The collapse carries on upwards to ul where the margins are intentionally collapsed with the attribute margin: 0px;. menuContainer is collapses in all places but it's top. The a elements are floating on top of nothing. So for all purpouses, it too has been collapsed.

This chain-reaction has collapsed the entire menu into topContainer, where top now is laying more or less on top of the a elements, but it's being pushed off by their attributes. The a elements are the only things not collapsed.

Imagine that all that exists to the browser are the loose floating a elements, and they have no margin nor padding to the parent div.

There's an attempt to deal with this issue here:

#top {
    clear: left;
}

However, what clear does is that it checks for floated content to the stated position of it (left in this case) and tells it to "stay clear of it" by moving the border edge down, but a has collapsed li entirely, and all the other parents are collapsed too, so there is no border line but the collapsed menu-container's bottom, which is where the top margin ends. Since topContainer is also collapsed, the margin of menuContainer has moved where it can fit; outside of topContainer.

So; the a elements are floting on nothing, but inside of topContainer. The border made by clear happens where it would have been even without it: at the top of topContainer. This is why you can see the box for top's content start where the a elements start, allowing "hello" to pop up next to them.

The solution

The solution for a better version looks like this:

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

#topContainer {
    margin: 4em auto 0 auto;
}

#menuContainer {
  margin: 0 auto;
  width: 300px;
}
#navMenu {
  margin: 0px;
  padding: 0px;
}
#navMenu ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#navMenu li {
  width: 3.5em;
  text-align: center;
  display: inline-block;
  padding: 0.3em;
  margin: 0 0 0 1.5em;
  background-color: #d4cbab;
  border-radius: 10px 10px 0px 0px;
}
#navMenu a {
  text-decoration: none;
  color: #40371c;
  padding: 0;
  margin: 0;
}
#navMenu li:hover{
  background-color: #efefef;
  color: #40371c;
}

/* Top content CSS */

#top {
  width: 350px;
  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>

I removed some unnecessary code. Here you can see a better structure where we are using the li elements as blocks which are to be displayed in line:

#navMenu li {
  display: inline-block;
}

This is the soul place where you need to define that the list elements (or menu buttons) are to be displayed horizontally on the same line.

And just for the sake of it, I left the margin on the menuContainer to show you that that doesn't matter if you put it there or where it should be; in topContainer.