Why is there a gap between float and div?

Question

Can anyone explain why there is a small gap between the top navigation element and the content div that sits below it in this jsfiddle?

When I float the navigation list items, this creates a small gap between the top navigation element and the main content element that sits below it. If I make the navigation items inline blocks, the gap goes away. I really wouldn't expect this behavior as floated items are supposed to be removed from the page flow and thus wouldn't be able to push down the content div. I looked at the page in Chrome Dev Tools and didn't see anything there that would account for this gap.

Thanks.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Header Gap Problem</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../reset.css" />
    <link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="wrapper">
    <nav class="nav" role="navigation">
        <li class="nav-item">Members</li>
        <li class="nav-item">Events</li>
    </nav>
    <div class="content-main">
        Main content
    </div>
</div>
</body>
</html>

CSS

body {
    -mox-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    margin: 0 auto;
}

.nav {
    position: relative;
    display: inline-block;
    width: 100%;
    background: #34495e;
}

.nav-item {
    float: left;
    /*
    display: inline-block;
    */
    padding: 1em;
    color: #fff;
    text-decoration: none;
}

.content-main {
    padding: 1em;
    background: #cf6;
}

possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Jeff, Aug 21 '14 at 21:56
Kind of and kind of not. The reason I say this is because I have only one inline-block element, the nav element. I'm not trying to remove the space between two inline-block elements. I've implemented the solution (removing space between elements) as described in your link elsewhere in my code and it did, indeed, work. — Jim, Aug 21 '14 at 22:31

Taruc · Answer 1 · 2014-08-21T21:57:24.070

1

Inline-block actually adds a space character. You mitigate the effect a few ways; I often by set the containing element of the inline-block element(s) to font-size:0.

.wrapper {
    margin: 0 auto;
    font-size:0;
}

http://jsfiddle.net/taruckus/4doogedh/14/

More info, and inline-block techniques: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

edited Aug 21 '14 at 21:57

answered Aug 21 '14 at 21:45

Taruc

181
8

This solution works but I'm not crazy about it because it appears to require that you set the font size in every element that contains text. That's easy to do with a simple example like this but a pain with real-life pages. – Jim Aug 21 '14 at 22:09
You could add the all children selector after the wrapper and set it something general like 'initial', like so http://jsfiddle.net/4doogedh/16/ – Taruc Aug 22 '14 at 20:36

score 0 · Answer 2 · answered Aug 21 '14 at 21:50

0

the .nav should have the following style:

  .nav {
position: relative;
display: block;
width: 100%;
background: #34495e;
height:100px;
}

let me hear if it worked out!

answered Aug 21 '14 at 21:50

Martijn

506
5
12

Not crazy about this solution either. It's not responsive and I'm designing for multiple devices. This would require me to come up with an appropriate height for many device form factors. – Jim Aug 21 '14 at 22:10

score 0 · Accepted Answer · answered Aug 21 '14 at 23:57

0

This would be a better option:

.nav {
position: relative;
display: block;
width: 100%;
background: #34495E;
overflow: hidden;
}

Fully responsive and all that.

answered Aug 21 '14 at 23:57

ralph.m

12,558
3
19
29

Thanks Ralph. This does work although I don't quite understand why. I kind of understand what "overflow: hidden" does and in this situation, I believe it's creating a block context which causes the main content to appear on the next line. I would think "display: block" would do the same but instead it pushes the main content to the right, not down. Earlier today I discovered that you could also do "display: table-row" and achieve the same effect. – Jim Aug 22 '14 at 05:10
The reason for the `overflow: hidden` is to force the container to wrap around the floated contents, which otherwise hang out of it and leave it with no height. – ralph.m Aug 22 '14 at 09:07
I see. Thanks for the explanation! – Jim Aug 22 '14 at 14:19

Why is there a gap between float and div?

3 Answers3