---
title: "Place div in a single line on opposite side"  
description: "Place div in a single line on opposite side"  
author: "Anonymous User"  
published: 2013-03-11  
updated: 2013-03-11  
canonical: https://www.mindstick.com/forum/644/place-div-in-a-single-line-on-opposite-side  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# Place div in a single line on opposite side

Hi Everyone!

I'm [trying](https://answers.mindstick.com/qa/93698/6-mistakes-couples-are-trying-to-save-money) to place two classes on the same line on [opposite sides](https://answers.mindstick.com/qa/37699/if-a-tunnel-is-made-in-earth-connecting-two-opposite-sides-then-what-will-be-the-gravity-in-this) of a div.

I want the two buttons: Login & [Register](https://www.mindstick.com/blog/220/registering-client-script-in-asp-dot-net) to be on [extreme](https://answers.mindstick.com/qa/49932/can-other-people-on-my-wifi-network-access-the-documents-on-the-hard-drive-attached-to-my-airport-extreme) sides of the #home-[button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) and on the same line.

Here is the HTML code:

<div id="[content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand)">\
<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](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp):#4578bc;\
color:#fff;\
padding:15px 20px;\
text-align:center;\
}

#home-button{\
width:100px;\
[margin](https://answers.mindstick.com/qa/104990/what-is-a-margin-call):100px 0 0 0;\
}

.lfloat{float:left}\
.rfloat{float:right}

\
However, no matter what I try, the two buttons: Login & Register [end up](https://www.mindstick.com/forum/156243/how-can-i-make-sure-my-emails-don-t-end-up-in-the-spam-folder) being on the same side on different lines.

Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)!

## Replies

### Reply by AVADHESH PATEL

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


---

Original Source: https://www.mindstick.com/forum/644/place-div-in-a-single-line-on-opposite-side

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.