CODEWITHSUNDEEP
htmlcssmargin
Rafael
Rafael

Reputation: 1487

CSS margin conflict

I have two classes, a container and a top_menu which holds my menu.

I don't know how this happens but whenever I define a div with the container class, my menu creates a margin on its top. If I remove the container div, the menu doesn't get the margin like it should normally do.

How can I fix this? Here's an example:

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: #e1e1e1;
}
.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">TEXT</h1>

Upvotes: 0

Views: 826

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

Your .top_menu has floated children, so it is technically occupying 0 height on the page. Use some sort of clearfix on that menu so the rest of the elements on the page will respect it's layout. I added a .clearfix class here that you can re-use any time you want to clear the floats of children elements on a parent element.

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: #e1e1e1;
}
.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;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Menu -->
<div class="top_menu clearfix">
  <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">TEXT</h1>

Upvotes: 1

Related Questions