Margin conflict in css

Asked

Viewed 147 times

3

Well, I have two classes: 1 - container who receives some information 2 - top_menu who receives the menu.

I can’t explain how this happens, but every time I put a div with the class container the menu creates a margin at the top.

someone knows why this happens?

If you remove the div container the menu is without margin, the right way. But I need the div container. 

body {
    margin: 0;
    color:#484848;
    font-family: 'Verdana', sans-serif;
}
.container {
    left: 0;
    right: 0;
    margin: 10px auto 10px auto;
    width: 95%;
    border-radius: 4px;
    background: #FFFFFF;
}
.top_menu {
    width: 100%;
}
ul.horizontal-menu, .horizontal-menu ul  {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.horizontal-menu {
    float: left;
    width:100%;
    background: #616161;
}
.horizontal-menu li {
    float: left;
    display: block;
    padding: 25px;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #616161;
    cursor: pointer;
}
.horizontal-menu li .material-icons {
    margin: -10px;
}
.hideshow ul li {
    width: 250px;
    text-align: center;
}
.horizontal-menu li:hover {
    border-bottom: 3px solid rgb(246,83,20);
    padding-bottom: 22px;
    background: #484848;
}
.horizontal-menu li.hideshow ul {
    position:absolute;
    display:none;
    left: -203px;
    width: 300px;
}
.horizontal-menu li.hideshow {
    position:relative;
}
.hideshow ul {
    padding-bottom: 7px;
    background: #616161;
    border-radius: 0px 0px 4px 4px;
    margin-top: 25px;
}
.top_menu_extra {
    background-color: #616161;
    width: 100%;
    display: none;
    border: 0 solid #484848;
    border-top-width: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Menu -->
<div class="top_menu">
  <ul class="horizontal-menu">
    <li id="sub">&nbsp;<i class="material-icons">search</i>&nbsp;</li>
    <li data-link="http://www.google.com">MENU 1</li>
    <li data-link="http://www.google.com">MENU 2</li>
    <li data-link="http://www.google.com">MENU 3</li>
    <li data-link="http://www.google.com">MENU 4</li>
    <li data-link="http://www.google.com">MENU 5</li>
    <li data-link="http://www.google.com">MENU 6</li>
    <li data-link="http://www.google.com">MENU 7</li>
    <li data-link="http://www.google.com">MENU 8</li>
    <li data-link="http://www.google.com">MENU 9</li>
    <li data-link="http://www.google.com">MENU 10</li>
    <li data-link="http://www.google.com">MENU 11</li>
  </ul>
</div>


<!-- Container -->
<div class="container">
  Container
</div>

<h1 class="txt-center">TEXTO</h1>

html css

  • In its CSS, the .container has edge at the top.

  • no. I put the div css container in the question.

  • So: margin: 10px auto 10px auto;. The first 10px is at the top.

  • the menu is outside the .container this and the problem. the menu has to be at the top without margin, and then have to come the .container on the margin.

1 answer

2


Edited!

To fix this. Remove the float: left of the classes .horizontal-menu and .horizontal-menu li and add display: display: inline-block; in these two classes. See below:

body {
margin: 0;
color:#484848;
font-family: 'Verdana', sans-serif;
}
.container {
left: 0;
right: 0;
margin: 10px auto 10px auto;
width: 95%;
border-radius: 4px;
background: #FFFFFF;
}
.top_menu {
width: 100%;
}
ul.horizontal-menu, .horizontal-menu ul  {
list-style-type: none;
margin: 0;
padding: 0;
}
.horizontal-menu {
display: inline-block;
width:100%;
background: #616161;
}
.horizontal-menu li {
display: inline-block;
padding: 25px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #616161;
cursor: pointer;
}
.horizontal-menu li .material-icons {
margin: -10px;
}
.hideshow ul li {
width: 250px;
text-align: center;
}
.horizontal-menu li:hover {
border-bottom: 3px solid rgb(246,83,20);
padding-bottom: 22px;
background: #484848;
}
.horizontal-menu li.hideshow ul {
position:absolute;
display:none;
left: -203px;
width: 300px;
}
.horizontal-menu li.hideshow {
position:relative;
}
.hideshow ul {
padding-bottom: 7px;
background: #616161;
border-radius: 0px 0px 4px 4px;
margin-top: 25px;
}
.top_menu_extra {
background-color: #616161;
width: 100%;
display: none;
border: 0 solid #484848;
border-top-width: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Menu -->
<div class="top_menu">
  <ul class="horizontal-menu">
    <li id="sub">&nbsp;<i class="material-icons">search</i>&nbsp;</li>
    <li data-link="http://www.google.com">MENU 1</li>
    <li data-link="http://www.google.com">MENU 2</li>
    <li data-link="http://www.google.com">MENU 3</li>
    <li data-link="http://www.google.com">MENU 4</li>
    <li data-link="http://www.google.com">MENU 5</li>
    <li data-link="http://www.google.com">MENU 6</li>
    <li data-link="http://www.google.com">MENU 7</li>
    <li data-link="http://www.google.com">MENU 8</li>
    <li data-link="http://www.google.com">MENU 9</li>
    <li data-link="http://www.google.com">MENU 10</li>
    <li data-link="http://www.google.com">MENU 11</li>
  </ul>
</div>


<!-- Container -->
<div class="container">
  Container
</div>

<h1 class="txt-center">TEXTO</h1>

  • This solves in part because it hinders the alignment of the div container. I want to settle this without touching the div container. what I don’t understand is what she has aver with the menu at the top. I think the problem is in the menu.

  • In this case you can remove the float: left from the classes: ". horizontal-menu" and ". horizontal-menu li" and add: "display: display: inline-block;" in these two classes! I will edit. See

  • I prefer to use display: inline-block instead of float: left. I find much easier to work and deis that I started using never again had problems like I always had when using float.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.