What is the correct way of aligning this menu? - html

Question

http://jsfiddle.net/rctdzdsm/
I'm trying to align the menu to the logo.
Do I have to manually margin it till I align correctly?
Or is there a better/proper way of doing this?
Because manually margining till I align it correctly, feels kinda kinda dumb.
* {
margin: 0;
padding: 0;
}
header {
background-color: #e58b1a;
}
header .logo {
float: left;
width: 400px;
height: 53px;
font-family: 'Arial';
color: white;
font-size: 50px;
position: relative;
top: 20px;
left: 50px;
}
.menu {
float: right;
font-family: arial;
}
.menu li {
/** Float to the left, helps it become horizontal */
float: left;
/** Marigin-right allows you to space your links */
margin-right: 30px;
}
<header class="show-when-loaded" style="height: 108px;">
<div class="logo">
<span class="text"> Daz Me Lulz </span>
</div>
<div class="menu">
<nav>
<ul>
<li> About Us
</li>
<li> Projectos De Lulz
</li>
<li> Get Involved
</li>
</ul>
</nav>
</div>
</header>

Answer 1

This is not a very flexible way of doing this. What if the height of your header changes?
Than you would manually have to align your padding and margins. If you are looking for a more accurate way of doing this, take a look at the different possibilities of displaying elements and aligning them. Even if your menu lives inside an unordert -list. Think of your list being a table and the list items being the table cells. If your elements inherit the height from your header you could easily align them vertically in the middle. Here is a snippet to give you an idea of what i mean.
html, body {
margin: 0;
padding: 0;
}
header {
height: 108px;
background-color: orange;
}
header:after {
clear: both;
}
nav {
height: 100%;
}
nav ul {
margin: 0;
padding: 0;
float: left;
display: table;
height: inherit;
}
nav li {
display: table-cell;
height: inherit;
vertical-align: middle;
}
nav a {
text-decoration: none;
color: white;
font-family: 'Arial';
}
.logo a {
font-size: 50px;
padding: 0 0 0 20px;
}
nav .nav-bar {
float: right;
}
nav .nav-bar li {
padding-right: 20px;
}
<header>
<nav role='navigation'>
<ul class="logo">
<li>
Daz Me Lulz
</li>
</ul>
<ul class="nav-bar">
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
Have fun.

Answer 2

I removed the position: relative. because its not needed.
Added the some margins for being aligned better.
Tried to make the li elements wrap, ended up with a none wrapping solution instead.
Made the links text direction from right to left. So they stick to the right side of the screen, without breaking the flow, as float: right does.
html, body {
margin: 0;
padding: 0;
}
header {
white-space: nowrap;
background-color: #e58b1a;
min-width: 650px;
}
header .logo {
display: inline-block;
font-family: 'Arial';
color: white;
font-size: 50px;
padding: 20px 0px 20px 20px;
}
.menu {
display: inline-block;
direction: rtl;
font-family: arial;
min-width: 350px;
width: calc(100% - 350px);
margin-top: 40px;
}
.menu ul {
display: inline;
direction: rtl;
padding: 0;
}
.menu ul li {
display: inline;
list-style: none;
margin-right: 10px;
}
<header class="show-when-loaded">
<div class="logo">
<span class="text"> Daz Me Lulz </span>
</div>
<nav class="menu">
<ul>
<li> About Us
</li>
<li> Projectos De Lulz
</li>
<li> Get Involved
</li>
</ul>
</nav>
</header>

Answer 3

Looks like CSS tables will help here.
header {
background-color: #e58b1a;
display: table;
vertical-align: middle;
width: 100%;
}
header .logo {
display: table-cell;
height: 53px;
font-family: 'Arial';
color: white;
font-size: 50px;
vertical-align: middle;
}
.menu {
display: table-cell;
font-family: arial;
text-align: right;
vertical-align: middle;
}
* {
margin: 0;
padding: 0;
}
header {
background-color: #e58b1a;
display: table;
vertical-align: middle;
width: 100%;
}
header .logo {
display: table-cell;
height: 53px;
font-family: 'Arial';
color: white;
font-size: 50px;
vertical-align: middle;
}
.menu {
display: table-cell;
font-family: arial;
text-align: right;
vertical-align: middle;
}
.menu li {
display: inline-block;
}
<link rel="stylesheet" type="text/css" href="style.css">
<title>Daz Me Lulz - Providng Renewable Energy to the children of Latin America</title>
<body>
<header class="show-when-loaded" style="height: 108px;">
<div class="logo">
<span class="text"> Daz Me Lulz </span>
</div>
<div class="menu">
<nav>
<ul>
<li> About Us
</li>
<li> Projectos De Lulz
</li>
<li> Get Involved
</li>
</ul>
</nav>
</div>
</header>
</body>