CODEWITHSUNDEEP
htmlcsscss-float
Jim
Jim

Reputation: 14270

Why is there a gap between float and div?

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;
}

Upvotes: 1

Views: 1067

Answers (3)

ralph.m
ralph.m

Reputation: 14345

This would be a better option:

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

Fully responsive and all that.

Upvotes: 0

Taruc
Taruc

Reputation: 301

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/

Upvotes: 1

Martijn
Martijn

Reputation: 514

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!

Upvotes: 0

Related Questions