CODEWITHSUNDEEP
htmlcss
ErraticFox
ErraticFox

Reputation: 1543

Horizontally aligning logo and nav menu in header

for some reason I cannot get my logo and nav menu to horizontally align in my header. I'm still figuring out floating and display properties and I'm guessing that's the problem. I've tried putting display:inline-block on both and that seemed to work until I put width:100% on my navContainer. So how would I go about doing this?

Here's a jsfiddle of my trouble. Thanks in advance.

EDIT: I meant to say I am trying to make the navContainer on the right of my logo. Float:Left on my logo works but puts a white space above the header.

CSS

#header {
    width: 100%;
    height: 100px;
    background-color: #DDDDDD;
}

#innerHeader {
    margin: 0 auto;
    width: 75%;
    height: 100px;
}

#logo {
    width: 100px;
    height: 100px;
}

#navList {
    margin-left: 50px;
    width: 100%;
    height: 100px;
    background-color: red;
}

#navList li {
display: inline;
list-style-type: none;
padding-right: 20px;
}

HTML

<div id="wrapper">
    <div id="header">
        <div id="innerHeader">
            <div id="logo">
                <img src="http://i.imgur.com/ZZvupYE.png" title="Bad Gizmod" />
            </div>
            <div id="navList">
                <ul>
                    <li><a href="#">Item two</a>

                    </li>
                    <li><a href="#">Item three</a>

                    </li>
                    <li><a href="#">Item four</a>

                    </li>
                    <li><a href="#">Item five</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- {block:Posts} {/block:Posts} -->

Upvotes: 1

Views: 5175

Answers (2)

CRABOLO
CRABOLO

Reputation: 8793

EDIT :

I guess the OP wanted it on the right of his logo.

http://jsfiddle.net/N9rk5/6/

Here is the css for that

#header {
    width: 100%;
    height: 100px;
    background-color: #DDDDDD;

}

#innerHeader {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100px;
}

#logo {
    float: left;
    width: 20%;
     margin: 0 auto;
    height: 100px;
    display: inline-block;
}

#navList {
     display: inline-block;
     width: 70%;
    margin-left: 0px;
    float: right;
     text-align: center;
    height: 100px;
    background-color: red;
}

#navList li {

    display: inline;
    float: left;
    list-style-type: none;
    padding: 0 5px;
}

Upvotes: 1

Eoin Murphy
Eoin Murphy

Reputation: 813

Try Adding:

#logo {
    float: left;
}

Don't forget to clear your floats though!

Upvotes: 1

Related Questions