Why div and Nav under getting displayed as block?

Question

Hi I am trying to create a complex header for my website. Right now this header is composed for two section.

Logo - Using a div for this. 15% of header. display: inline-block
Navigation - Using nav for this. 85% of header. display: inline-block

But in browser I am seeing logo on top of nav as kept in stack.

How to get rid of this issue.

Following is my code.

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <!-- main css-->
        <link rel="stylesheet" type="text/css" href="./css/main.css"/>
    </head>
    <body>
        <header>
            <div id='logo'>
                <p>LOGO</p>
            </div>
            <nav>
                klkdfglkdfjklg
            </nav>
        </header>
        <footer></footer>
    </body>
</html>

**CSS**

body {
    padding: 0;
    margin: 0;
    border: 0;
    background-color: #ccc;
}

header {
    background-color: #444;
    padding: 0;
    margin: 0;
    text-align: center;
}

#logo {
    display: inline-block;
    background-color: yellow;
    padding: 0;
    margin: 0;
    border: 0;  
    width: 15%;
}

nav {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    width: 85%;
    background-color: red;
}

Dont put the DIV inside the nav, unless it is part of the navigation (which it isn't by your markup) — LDJ, Feb 17 '15 at 08:05

score 1 · Accepted Answer · answered Feb 17 '15 at 08:07

1

In your case nav and div are inside your header element and the div is on the top of nav. You can try

CSS

nav {
    float:left;
}
#logo {
    float:left;
}

answered Feb 17 '15 at 08:07

rick jan cawaling

430
3
10

score 0 · Answer 2 · answered Feb 17 '15 at 08:07

According to what I understand it looks like you want the logo and nav side by side.

In your code you have written only display:inline-block, with this you also need to add vertical-align:top/bottom/middle.

Apart from this, a simple solution is using float left/right according to requirement

score 0 · Answer 3 · edited May 23 '17 at 11:45

0

<div id='logo'><p>LOGO</p></div><nav>klkdfglkdfjklg</nav>

remove the newline space between div and nav tags

you can read on this article

How do I remove extra margin space generated by inline blocks?

i recommend also using reset css http://meyerweb.com/eric/tools/css/reset/

edited May 23 '17 at 11:45

Community

1
1

answered Feb 17 '15 at 08:09

Oli Soproni B.

2,774
3
22
47

Why div and Nav under getting displayed as block?

3 Answers3