Home > DeveloperSection > Forums > Place div in a single line on opposite side
Ashish Pandey

Total Post:128

Points:898
Posted on    March-11-2013 3:08 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 973  View(s)
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!



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    March-11-2013 8:39 AM

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

Don't want to miss updates? Please click the below button!

Follow MindStick