How to fix reversed header? - html

Question

I know that when you put float: right to a li element it displays in a reversed order, but how can I fix the order so it displays "correctly" and on the right side of the website? Now it displays in the left side of the website. I've tried to read some old questions but didn't find anything that could help me, and also, how can I make the header display in the middle of the #333333 colored header without padding? Will auto element work?
.header {
background-color: #333333;
height: 50px;
width: 100%;
}
.upper_header ul {
margin: 0px;
float: right;
}
.upper_header li {
display: table-cell;
vertical-align: middle;
float: left;
}
.upper_header a {
text-decoration: none;
color: #fff;
}
<div class="header">
<div class="headerContainer">
<ul class="upper_header">
<li>Home
</li>
<li>About Us
</li>
<li>Team
</li>
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
I've tried putting float: right to the ul element and float: left to the li element, then the order is correct but the position of it is in the left. (Sorry for putting two questions in one thread, didn't want to wait another 30 minutes to submit another question.)

Answer 1

You can set your LI's to display: inline-block then you dont need to use floats.
Inline-block elements then can be aligned using text-align
Note:
Inline-block can cause a space between elements, for more info about then please read this https://css-tricks.com/fighting-the-space-between-inline-block-elements/
.header {
background-color: #333333;
width: 100%;
text-align: right;
}
.upper_header {
width: 100%;
}
.upper_header li {
display: inline-block
}
.upper_header a {
padding: 5px 10px;
display: block;
text-decoration: none;
color: #fff;
}
<div class="header">
<div class="headerContainer">
<ul class="upper_header">
<li>Home
</li>
<li>About Us
</li>
<li>Team
</li>
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>

Answer 2

First - you have some mistakes in your code, in CSS you use .upper_header ul, but this is not correct syntax in your context. Right is ul.upper_header (your ul list is not under class upper_header, but on the same level), so it does not have effect for you.
If you don't need so much nested div and not so much classes, prevent using it. Example is below (this is solution with centered menu):
.header ul {
text-align: center;
list-style: none;
}
.header li {
display: inline-block;
}
http://jsfiddle.net/aqhesrjn/4/
Then you can easily play with text-align: right in ul element
.header ul {
text-align: right;
list-style: none;
}
.header li {
display: inline-block;
}
http://jsfiddle.net/aqhesrjn/3/

Answer 3

slightly modified CSS & you are using wrong selector(.upper_header ul)instead of ul.upper_header.
ul.upper_header ==> center to align center
ul.upper_header ==> right to align right
.header {
background-color: #333333;
height: 50px;
width: 100%;
}
ul.upper_header {
margin: 0px;
text-align: center;
}
.upper_header li {
display: inline-block;
}
.upper_header a {
text-decoration: none;
color: #fff;
}
<div class="header">
<div class="headerContainer">
<ul class="upper_header">
<li>Home
</li>
<li>About Us
</li>
<li>Team
</li>
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>

Answer 4

you can do this as well ,one of the many options available depending upon ofcourse what you are trying to get as an end result.and you were using that upper_header class in a wrong way,you dont even need that.
.header {
background-color: #333333;
height: 50px;
width: 100%;
}
.headerContainer{width:30%;
float:right;}
.headerContainer ul li {
display:inline;
}
.headerContainer ul li a {
text-decoration: none;
color: #fff;
}