Why do my divs appear "inline"?

Question

Update:. Why divs appear the way they do is more important than removing the problem. If I don’t know why divs appear the way they do, I don’t understand how divs work.

---

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

I want the menuContainer and top to be vertically beneath each other, rather than the X angle (and I thought it was standard for divs to appear beneath each other), but they appear both one above the other and "inline".

This is how it looks in my browser (yes, I have f5: ed, and the fiddle shows the same thing):

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

Why do divs appear "inline" (see where hello is) and how do I edit it to look the way I want?

 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, which is based on the CSS menu, is this one.

Answer 1

How to set up horizontal navigation using CSS? demo here: jsBin demo

Your #top Reset Fields
due to the folded (but with margins) of the previous #menuContainer element. Failure due to using internal elements of floated LI.

I created a small demo (with less code) that reflects your problem; and 3 decisions

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 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. */ 

It is worth noting that clear:left; (in the #top element) is not required if you use the LI set to inline-block or use the overflow:auto; trick overflow:auto; .

Answer 2

you really should just remove the floats. They don’t need you. You can do 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 problem has nothing to do with margin , as some others claim. Change the margin you want if you check the .menuContainer in the developer tools, you will see that it still has a height of 0 . He collapsed due to the floats. Just remove the floats, as I did in my example, and it will work just fine. In any case, it is not structured correctly, you have a float on the a tag, but their parent li is the one that should be floating or inline. Therefore, calling inline on li and float: left on a not needed.

SHOTS SCREENS

This first snapshot is your code with only fields removed, as you can see that it has a height of 0 :

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

Wrap up

SO - the problem is not in the floats, but in the way you use them. Floats must be added to the parent element a (which is equal to li ). The li elements are what should be inline. But due to the way your CSS was structured around these floats, your styles were ruined after they were removed. I had to restructure a hand full of your CSS classes to get the desired result. In the future, make sure that floats are added to elements that should be inline, and not their child elements.

Answer 3

you need to change the margin its overlap to the next div

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

Answer 4

Now, just to write the answer I wanted to read (and hopefully can help other people find out what just happened)

Quick fix

Removing a field from menuContainer and adding it to topContainer will “fix” the problem visually and “look” as you want, but the code is still bad, because the reason for this behavior still exists.

Why does the marker trigger behavior?

The problem (which we will discuss below) starts because the margin pushes the menu down, and when the content in top pressed, it will find the space in which it appears.

Problem

Part of the code causing this mess:

 #navMenu a { float: left; } 

The problem here is that element a got all the properties for no good reason. And here what happens is that it destroys the parent element. Collapse makes the whole element "invisible" and useless.

What the float does is that it removes the standard block -property, which usually makes up the behavior for the li elements, and this leads to the fact that the a elements are collected on the same line. This is the desired effect, but it also destroys the parent element li , which looks like this:

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

The collapse continues up to ul , where the fields are intentionally collapsed with the margin: 0px; attribute margin: 0px; . menuContainer collapses in all places, but on top. Elements a float on top of nothing. So for all the magenta, he also collapsed.

This chain reaction collapses all the menus in topContainer , where top now placed more or less on top of a elements but repelled by their attributes. Elements a are the only things that have not collapsed.

Imagine that everything that exists in the browser is free floating elements of a , and they do not have a field or addition to the parent div.

Here is an attempt to solve this problem:

 #top { clear: left; } 

However, what makes clear is that it checks the floating content at its specified position (in this case, to the left) and tells it to “stay away from it,” moving the edge of the border down, but a completely collapsed li , and all the other parents also collapsed, so there is no border line, but a folded bottom menu-container , where the top edge ends. As topContainer also collapses, the menuContainer field moves to where it can fit; outside topContainer .

So, the a elements do not work with anything, but inside the topContainer . The border made clear occurs where it would even be without it: at the top of the topContainer . This is why you can see the window for the top beginning of the content where the a elements start, allowing a "hello" to appear next to them.

Decision

The solution for the best version is as follows:

 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 deleted the unnecessary code. Here you can see the best structure in which we use li elements as blocks that should be displayed in line :

 #navMenu li { display: inline-block; } 

This is the place of the soul where you need to determine that the list items (or menu buttons) should be displayed horizontally in one line.

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