Cacher is the code snippet organizer for pro developers

#login-toolbar { margin-top: 5%; display: block; float: right; width: 50%; padding: 0; list-style-type: none; }

#login-toolbar li { display: inline-block; float: right; padding: 0 2% 0 2%; color: #444; border: 1px solid #ADD8E6; font-size: .6em; font-family: sans-serif;}

<header id="layout-header">
  <ul id="login-toolbar">
   <% if !logged_in? %>
     <li><a id="login-button" href="/login">Login</a></li>
     <li><a id="register-button" href="/users/new">Register</a></li>
   <% else %>
     <li><a href="/users/<%= "#{current_user_id}" %>"><%= logged_in_user.username %></li>
     <li><a id="logout-button" href="/logout">Logout</a></li>
   <% end %>
    <li><a href="/">Home</a></li>
   </ul>
</header>