Move a nav which is inside a header to the right side

Question

I have a nav inside my header and I wanted to move the nav to the right side of the page. I tried float:right but it was not lined up anymore with my header. here is my code:

<header>
<nav>
    <h1>my page</h1>
    <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>blog</li></a>
        <a href="#"><li>about</li></a>
        <a href="#"><li>contact</li></a>
        <a href="#"><li>links</li></a>
    </ul>
</nav>

header{
background:#999;
color:white;
padding:15px 15px 0 15px;
}

header h1{
margin:0;
display:inline;
}

nav ul{ 
margin:0;
display:inline;
padding:0 0 0 15px;
}

nav ul li{
background:black;
color:white;
display:inline-block;
list-style:none;
padding:5px 15px;

}

Is this what you're looking for? http://jsbin.com/yumodu/1/edit — Hashem Qolami, Aug 17 '14 at 20:51
Looks like `float:right` works...add that in you CSS under `nav ul` http://jsfiddle.net/dtt7ehd4/ — Dan, Aug 17 '14 at 20:54
The point is that you should clear the float in order for the parent (the `header`) to be as tall as its floated child (the `ul`). You could do that by using `::after` pseudo-element like so: `header:after { content: ""; display: block; clear: both; }` — Hashem Qolami, Aug 17 '14 at 20:58

Kamil · Answer 1 · 2014-08-17T21:15:30.833

0

All you need is to add inline-block properties to your nav and header elements. Also add width:100% to your header so it will be full size. Of course don't forget about float:right to your nav.

Also move your h1 outside the nav.

There is correct code:

header{
background:#999;
color:white;
padding:15px 15px 0 15px;
width:100%;
}

header h1{
margin:0;
display:inline;
}

header, nav {
display:inline-block;
}

nav {
float:right;
}

nav ul{ 
margin:0;
display:inline;
padding:0 0 0 15px;
}

nav ul li{
background:black;
color:white;
display:inline-block;
list-style:none;
padding:5px 15px;

}

edited Aug 17 '14 at 21:15

answered Aug 17 '14 at 21:08

Kamil

1,987
16
14

`There is correct code` I don't think so, since it moves the `
` element to the right side and also adds a horizontal scroll: http://jsfiddle.net/hashem/wnrkec54/1/
– Hashem Qolami Aug 17 '14 at 21:13
tested on FF and Chrome and i see no horizontal scroll. – Kamil Aug 17 '14 at 21:18
It would be nice if you could provide an online demo on jsfiddle or ant other online editors. – Hashem Qolami Aug 17 '14 at 21:20
Ok, thanks for advise. I'll try to use jsfiddle next time. I'm new here. – Kamil Aug 17 '14 at 21:26

score 0 · Answer 2 · edited May 23 '17 at 12:29

As I noted, you should clear floats at the end of the container (header or nav in this particular case) to stretch background color of the container.

That's because the container has no idea about its floated children or what the height of the floated elements are, Hence it won't stretch.

You can find a lot of discussion here.

Clearing floats can be done either by using the ::after pseudo-element:

EXAMPLE HERE

header:after {
  content: "";
  display: block;
  clear: both;
}

Or by appending a <div> element having a .clear class to the container:

EXAMPLE HERE

<header>
  <nav>
    <h1>my page</h1>
    <ul>
      ...
    </ul>
  </nav>
  <div class="clear"></div>
</header>

.clear { clear: both; }

Besides, note that <a> is NOT a valid child for <ul> element. You should place your anchor tags within list items (<li> elements) when you're working with ordered/unordered lists.

score -1 · Answer 3 · answered Aug 17 '14 at 20:56

-1

try this:

<header>
<nav>
<h1>my page</h1>
<ul>
    <a href="#"><li>Home</li></a>
    <a href="#"><li>blog</li></a>
    <a href="#"><li>about</li></a>
    <a href="#"><li>contact</li></a>
    <a href="#"><li>links</li></a>
</ul>
</nav>

CSS

header{
background:#999;
color:white;
padding:15px 15px 0 15px;
}

header h1{
margin:0;
display:inline;
}

nav ul{ 
margin:0;
display:inline;
padding:0 0 0 15px;
float:right;
margin-top:-5px
}
nav ul:after{clear:both;}

nav ul li{
background:black;
color:white;
display:inline-block;
list-style:none;
padding:5px 15px;
}

See fiddle here

answered Aug 17 '14 at 20:56

Devin

7,690
6
39
54

Using `display:inline;` and `float:right;` at the same time is pointless. Besides, you didn't clear the float properly as `nav ul:after{clear:both;}` do nothing. And while `margin-top:-5px` is aligned the navigation vertically in a valid position here, it's absolutely not a correct solution. – Hashem Qolami Aug 17 '14 at 21:06
wow, I forgot some code he left, sorry, the world will fall apart. The fact remains: Does the solution work? yes. Thus, it's TO THE VERY LEAST a QUITE CORRECT SOLUTION. TO THE VERY LEAST. – Devin Aug 17 '14 at 21:44

Move a nav which is inside a header to the right side

3 Answers3

` element to the right side and also adds a horizontal scroll: http://jsfiddle.net/hashem/wnrkec54/1/