CODEWITHSUNDEEP
htmlcsscss-float
arteepa
arteepa

Reputation: 338

Header: Logo to the left, nav to the right. (Vertical aligned to the center)

I'm having trouble aligning my navigation to the right of the header. Searching on the web, I think the problem is because I'm aligned the items vertically to the center, and the float option isn't working with that.

Any clues?

See: http://jsfiddle.net/PabloArteeL/T7JDJ/

HTML:

<header>
    <div class="logowrapper" style="padding-left:1em;">
        <div class="logo"></div>
    </div>
    <nav><a href="#">SOME LINK</a>
    </nav>
</header>

CSS:

header {
    background-color: #eaeaea;
    height: 80px;
    margin: 10px;
}
.logowrapper {
    display: table-cell;
    height: 80px;
    vertical-align: middle;
    text-align: center;
}
.logo {
    display: inline-block;
    background-image: url("http://placehold.it/250x40");
    width: 250px;
    height: 40px;
}
nav {
    right: 0px;
    display: table-cell;
    vertical-align: middle;
}
nav a {
    color: black;
    text-decoration: none;
}

Desired effect:

Desired Effect

Upvotes: 0

Views: 2438

Answers (3)

thepratt
thepratt

Reputation: 323

Imagine's answer will only work if it is text. A better solution uses floats and margin. For general elements side by side it's best to use display: block over display: table-cell which emulates a <td>

http://jsfiddle.net/T7JDJ/8/

Just change the margins, and widths to your liking.

Upvotes: 0

user3822284
user3822284

Reputation:

try this : 

<header>
    <div class="logowrapper">
        <div class="logo"></div>
    </div>
    <div class = "link">
    <nav><a href="#">SOME LINK</a>
    </nav>
    <div>
</header>

css :

 header {
    background-color: #eaeaea;
    height: 80px;
    margin: 10px;
}
.logowrapper {
    height: 80px;
    vertical-align: middle;
    text-align: center;
    padding-left:1em;
    float: left;
    padding: 18px;
}
.logo {
    background-image: url("http://placehold.it/250x40");
    width: 250px;
    height: 40px;
}

.link {
    padding: 30px;
}
nav {
    right: 0px;
    vertical-align: middle;
    text-align: left;
    float: right;
}
nav a {
    color: black;
    text-decoration: none;
}

Upvotes: 0

Jacob G
Jacob G

Reputation: 14172

You need to give <nav>a width and change text-align:left; to text-align:center; or it will not center text:

nav {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width:400px;
}

Result: enter image description here

JSFiddle

Upvotes: 1

Related Questions