PLACE DIV IN A SINGLE LINE ON OPPOSITE SIDE

Ashish Pandey

Total Post:128

Points:898
Posted by  Ashish Pandey
 1242  View(s)
Ratings:
Rate this:

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!

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Place div in a single line on opposite side

    Hi Ashish!

    Replace css section from below section

    .login-button {
        background:#4578bc;
        color:#fff;
        padding:15px 20px;
        text-align:center;
        display:inline-block;
    }
    #home-button {
        margin:100px 0 0 0;
    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!