CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3386779
user3386779

Reputation: 7175

css style for div tag

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/

Upvotes: 2

Views: 149

Answers (5)

Ga&#235;l Barbin
Ga&#235;l Barbin

Reputation: 3919

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>

Upvotes: 3

Adam Michna
Adam Michna

Reputation: 169

Something like:

.header {
    position: relative;
}

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

Upvotes: 0

Daan
Daan

Reputation: 2799

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.

Upvotes: 0

Mouhamad Ounayssi
Mouhamad Ounayssi

Reputation: 361

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>

Upvotes: 0

rsudip90
rsudip90

Reputation: 869

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

Upvotes: 0

Related Questions