CODEWITHSUNDEEP
htmlcss
Luke Hallett
Luke Hallett

Reputation: 47

Gap between two divs with floated items

I am creating a navbar with two sections, one small top one, and a bigger bottom one, which both have floated icons, however there is a small space in between them. There is only a small gap between them. I'm not sure why, any help is appreciated. I am also using bootstrap, however none of the navbar is bootstrap.

header div.nav {
  background-color: #fff;
}

header div.top-nav {
  overflow: hidden;
}

header div.top-nav div.info {
  background-color: #f1f1f1;
  width: 100%;
  display: inline-block;
}

header div.info div.contact {
  float: left;
}

header div.top-nav div.contact a {
  padding: 3px 16px;
  display: inline-block;
}

header div.info div.social {
  float: right;
}

header div.top-nav div.social a {
  color: #333;
}

header div.top-nav div.social a i {
  padding: 8px 16px;
}

header div.top-nav div.social a i:hover {
  color: #6b6b6b;
  transition: 0.5s;
}

header div.nav div.brand {
  float: left;
}

header div.nav div.links {
  float: right;
}

header div.nav div.brand a {
  display: block;
  color: #f07e0b;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

header div.nav div.brand a:hover {
  display: block;
  color: #ffc863;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
<header>
  <div class="top-nav">
    <div class="info">
      <div class="container">
        <div class="contact">
          <a>[email protected]</a>
        </div>
        <div class="social">
          <a href="https://twitter.com/radioarrive"><i class="fa fa-twitter-square"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="nav">
    <div class="container">
      <div class="brand">
        <a>ArriveRadio</a>
      </div>
      <div class="links">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

Upvotes: 0

Views: 264

Answers (2)

kauffmanes
kauffmanes

Reputation: 518

If you put a 1px border around the top nav and the bottom, you can see that the missing area is caused by the top div not filling 100% of the height of the parent.

By removing the style that sets the <div class="info"> to inline-block, you will remove this small space.

header div.top-nav div.info {
    background-color: #f1f1f1;
    width: 100%;
    /* display: inline-block; */
}


/* header div.nav {
    background-color: #fff;
} */

header div.top-nav {
    overflow: hidden;
    border: solid 1px;
}

header div.top-nav div.info {
    background-color: #f1f1f1;
    width: 100%;
    /* display: inline-block; */
}

header div.info div.contact {
    float: left;
}

header div.top-nav div.contact a {
    padding: 3px 16px;
    display: inline-block;
}

header div.info div.social {
    float: right;
}

header div.top-nav div.social a {
    color: #333;
}

header div.top-nav div.social a i {
    padding: 8px 16px;
}

header div.top-nav div.social a i:hover {
    color: #6b6b6b;
    transition: 0.5s;
}

.nav {
border: solid 1px;
}
header div.nav div.brand {
    float: left;
}

header div.nav div.links {
    float: right;
}

header div.nav div.brand a {
    display: block;
    color: #f07e0b;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

header div.nav div.brand a:hover {
    display: block;
    color: #ffc863;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

li {
    float: left;
}

li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

 <header>
  <div class="top-nav">
            <div class="info">
                <div class="container">
                    <div class="contact">
                        <a>[email protected]</a>
                    </div>
                    <div class="social">
                        <a href="https://twitter.com/radioarrive"><i class="fa fa-twitter-square"></i></a>
                    </div>
                </div>
            </div>
        </div>
  
        <div class="nav">
            <div class="container">
                <div class="brand">
                    <a>ArriveRadio</a>
                </div>
                <div class="links">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                </div>
            </div>
        </div>
  </header>

Upvotes: 2

YarGnawh
YarGnawh

Reputation: 4654

Here is a jsfiddle: https://jsfiddle.net/45v15kjr/

header div.top-nav div.info {
    background-color: #f1f1f1;
    width: 100%;
    display: block; /* this is part of the issue */
}

Also there are a few containers that need clearfixes.

Upvotes: 1

Related Questions