CODEWITHSUNDEEP
htmlcsscss-float
xan
xan

Reputation: 4696

Place div in a single line on opposite side

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.

Upvotes: 0

Views: 3394

Answers (4)

Web Designer cum Promoter
Web Designer cum Promoter

Reputation: 1336

If you use float:right; means it will create problems in bigger size monitor and high resolutions, so you can use left: 35%; position: absolute; for div2 to solve resolution issues.

happy coding...

Upvotes: 0

Dead Man
Dead Man

Reputation: 2921

You can try this :

Edit : 

.login-button {
background: #4578BC;
color: white;
padding: 15px 20px;
text-align: center;
width: 100px;
float: left;
}

#home-button {
width: 282px;
margin: 100px 0 0 0;
float: right;
}

Upvotes: 0

ktm5124
ktm5124

Reputation: 12123

The reason Login and Register are on different lines is because they are both block-level elements. You have to float one or both of them to put them on the same line, or make them inline.

Here is an example:

http://jsfiddle.net/K2Rtr/

<div id="right">
    <div id="right-left">Login</div>
    <div id="right-right">Register</div>
</div>

#right { float: right; width: 100px;}
#right-left {float: left; }
#right-right {float: right;}

In this example, Login and Register are on opposites sides of a div that is 100px wide and floated right.

Upvotes: 1

Chamika Sandamal
Chamika Sandamal

Reputation: 24312

Try following style,

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

http://jsfiddle.net/YvUER/

Upvotes: 0

Related Questions