css style for div tag

Question

I want to display the button in div tag on right side.I use the code which I used to display the div content on right side.Now I have a problem that my div tag display on left side. I want to display login div tag on right side. I created a layout.I want to display login div tag where I marked as red and named it btn div.I marked current display of div tag in blue color. enter image description here

CSS

.login {
    margin:0;
    padding:0px 0px 0 0;
    text-align:right;
    float:right;
    width:40%;
}

HTML

<div class="header">
    <div class="ribbon"></div>
    <div class="logo"></div>
    <div class="login">//btn</div>
</div>

http://jsfiddle.net/mount/q4gxv7y2/

try on the header `position: relative` and the div login/btn `position:absolute; bottom: 0; right: 0;` — Tune389, Feb 26 '15 at 07:30
No needs to make hard stats: position: relative/ position:absolute; bottom: 0; right: 0; is what you have to do:) — Gaël Barbin, Feb 26 '15 at 07:37
You need to try more CSS option before you ask. Study here http://www.w3schools.com/css/default.asp — Mardzis, Feb 26 '15 at 07:44

score 3 · Accepted Answer · edited May 23 '17 at 12:16

You can use an absolute position for your login div. For that, you also have to set the header position as relative, in order to make position the login div relatively to it.

Position absolute but relative to parent

.header{
   position:relative;
  background:red;
  width:100%;
  height:100px;
  margin-bottom:300px
}
.login{
    margin:0;
    padding:0px 0px 0 0;
    text-align:right;
    width:40%;
  
  position:absolute; 
  right:0;
  bottom:0;
  background:blue;
}

  <div class="header"> 
      <div class="ribbon">
      </div>
      <div class="logo">
      </div>
      <div class="login">
          //btn 
      </div>   
  </div>

Seems like you beat me to it. ;) – Daan Feb 26 '15 at 07:37 — Daan, Feb 26 '15 at 07:37

Adam Michna · Answer 2 · 2015-02-26T07:52:18.243

0

Something like:

.header {
    position: relative;
}

. login  {
    position: absolute;
    bottom: 0;
    right: 0;
}

edited Feb 26 '15 at 07:52

answered Feb 26 '15 at 07:32

Adam Michna

169
1
7

Daan · Answer 3 · 2015-02-26T07:45:27.063

0

Use position:absolute to achieve this.

HTML

<div class="header"> 
    <div class="ribbon">
    </div>
    <div class="logo">
    </div>
    <div class="login">
    //btn 
    </div>   
</div>

CSS

.header {
    width:100%;
    height:40px;
    outline:1px solid green;
    position:relative;   
}
.login{
    margin:0;
    padding:0px 0px 0 0;
    text-align:right;
    float:right;
    width:40%;
    outline:1px solid red;
    position:absolute;
    right:0;
    bottom:0;
}

JSFiddle demo

Side note: Keep in mind that class is only used for objects placed more than once on a page. If an object is only placed once on the page, in your case for example: header, logo, then you should use id instead of class. Biggest reason for this is because id's have a higher specificity score compared to classes. So you can give styles to all objects more controlled.

edited Feb 26 '15 at 07:45

answered Feb 26 '15 at 07:34

Daan

2,680
20
39

I have two buttons now both are displayed in same place. – user3386779 Feb 26 '15 at 07:48
Then for one button change: `bottom:0` to `bottom:40` or whatever amount of pixels fits best. – Daan Feb 26 '15 at 07:49
please view my jsfiddle – user3386779 Feb 26 '15 at 08:02

score 0 · Answer 4 · answered Feb 26 '15 at 07:37

html:

<div class="header"> 
    <div class="ribbon"></div>
    <div class="logo"></div>
    <div class="login">
         <input type='button' value='right click' class='right-button'>
    </div>   
</div>

css:

.login{
    margin:0;
    padding:0px 0px 0 0;
    text-align:right;
    float:right;
    width:40%;
    border: 1px red solid;
    height: 100%;
    position:relative;
}
.header{
    width: 100%;
    height: 100px;
    border: 1px green solid;
}
.right-button{
    position:absolute;
    bottom:0;
    right:0;
}

Jsfiddle Demo

score 0 · Answer 5 · answered Feb 26 '15 at 07:38

You can use something like this:

CSS

.login {
    margin:0 auto;
    padding:0
    text-align:right;
    float:right;
    width:40%;
}
.ribbon{
    float:left;
}
.logo{
    float:left;
}
.header {
    width:100%;
    height:auto; // or specify the max height of content
    outline:none
    position:relative;   
}

HTML

<div class="header">
    <div class="ribbon"></div>
    <div class="logo"></div>
    <div class="login">//btn</div>
</div>

css style for div tag

5 Answers5