Aligning logo on left side and nav items on right side using flexbox

Question

I want my logo on the left side, and About Us and Log In on the other.

I tried using floats, but the right float was pinned to the bottom of the header.

I'm also trying flexbox but things are not doing what I want.

<header>
  <a id="logo" href="#">Logo</a>
  <nav>
    <ul>
      <li><a id="aboutus" href="#">About Us</a></li>
      <li><a id="login" href="#">Log In</a></li>
    </ul>
  </nav>
</header>

Any advice on the simplest way to do this?

Here are several options: http://stackoverflow.com/a/33856609/3597276 — Michael Benjamin, Aug 05 '16 at 03:47

score 0 · Accepted Answer · answered Jul 09 '16 at 05:53

<style>
ul {
list-style-type: none;
}

li {
float: right;
}

li a {
display: block;
text-align: center;
padding: 14px 16px;
}

</style>

<header>
    <a style="float:left" id="logo" href="#">Logo</a>
    <nav >
         <ul >

            <li><a id="aboutus" href="#">About Us</a></li>
            <li><a id="login" href="#">Log In</a></li>
        </ul>
    </nav>
</header>

Try this

Aligning logo on left side and nav items on right side using flexbox

1 Answers1