simple nav left and right alignment

Question

So I've done this correctly before and found examples that work but I'm really trying to figure out WHY this is happening. Basically I want a navbar with a left and a right side, and the way I'm trying now has the right side being pushed down.

Do not hesitate to tell me to do this a completely different way! My main concern at this point is understanding what is happening as well as developing good industry best practices.

Heres my code

<header class="header">
<nav class="nav">
    <div class="nav-left">
        <ul>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
        </ul>
    </div>
    <div class="nav-right">
        <ul>
            <li><a href="#">Bloh</a></li>
            <li><a href="#">Bloh</a></li>
        </ul>
    </div>
</nav>

nav {
    background: green;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav a {
    display: block;
    width: 60px;

}

.nav-left li {
    float: left;
}

.nav-right li {
    float: right;
}

Answer 1

Your markup organization is very good. The reason why your links are being pushed down is because your nav-left is occupying the entire width of the navigation. Here is a JSFiddle: http://jsfiddle.net/fejut75a/2/.

Note that you can adjust the padding to what you want.

CSS:

nav {
    background: green;
    padding: 15px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav a {
    display: block;
    width: 60px;
}

.nav-left {
    float: left;
}

.nav-left ul li {
    float: left;
}

.nav-right ul li {
    float: right;
}