Pure css floating issue

Question

I'm using the Pure CSS framework and my code looks like

<div class="container pure-g">

 <header class='pure-u-1'>
  <h1 class='logo'>
    <a href="#">TEST</a>
  </h1>
  <nav class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#">Example Link 1</a></li>
        <li><a href="#">Example Link 2</a></li>
    </ul>
  </nav>
 </header>
</div>

Here's a JSfiddle: http://jsfiddle.net/ME4jv/

What I'm trying to do is line up the logo (to be floated left) with the navigation links (floated right), but both floating and the grid system aren't working.

Answer 1

Unfortunately you need to override the framework width declaration that has been assigned to the nav. Currently it is set to 100%;. This is why it is not floating up.

DEMO http://jsfiddle.net/ME4jv/2/

.pure-menu.pure-menu-open {
    float:right;
    display: block;
    width: auto;
}