title: Place div in a single line on opposite side
body: <p>I'm trying to place two classes on the same line on opposite sides of a div.</p>
  
  <p>I want the two buttons: <code>Login</code> &amp; <code>Register</code> to be on extreme sides of the <code>#home-button</code> and on the same line.</p>
  
  <p>Here is the <code>HTML</code> code:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="lcol" class="lfloat"&gt;
          Hello
      &lt;/div&gt;
      &lt;div id="home-button" class="rfloat"&gt;
          &lt;a href="#"&gt;&lt;div class="login-button Login"&gt;Login&lt;/div&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;div class="login-button Register"&gt;Register&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.login-button{
      background:#4578bc;
      color:#fff;
      padding:15px 20px;
      text-align:center;
  }
  
  #home-button{
      width:100px;
      margin:100px 0 0 0;
  }
  
  .lfloat{float:left}
  .rfloat{float:right}
  </code></pre>
  
  <p>However, no matter what I try, the two buttons: <code>Login</code> &amp; <code>Register</code> end up being on the same side on different lines.</p>