Hi Everyone!

I'm trying to place two classes on the same line on opposite sides of a div.

I want the two buttons: Login & Register to be on extreme sides of the #home-button and on the same line.

Here is the HTML code:

<div id="content">
    <div id="lcol" class="lfloat">
        Hello
    </div>
    <div id="home-button" class="rfloat">
        <a href="#"><div class="login-button Login">Login</div></a>
        <a href="#"><div class="login-button Register">Register</div></a>
    </div>
</div>
My CSS:

.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}

However, no matter what I try, the two buttons: Login & Register end up being on the same side on different lines.

Thanks in advance!