CODEWITHSUNDEEP
htmlcss
Frank G.
Frank G.

Reputation: 1579

How to position an element to the right side?

I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:

 position: Absolute; top: 20px; right 0px;

That would work but if you adjust the browser the text moves with it.

I created a JFiddle that you can find here:

http://jsfiddle.net/rKWXQ/

This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.

Here is the header element and inside of that I have a right_header element.

    <div id="header">
        <span class="right_header">Call Now (555) 555-5555</span>
    </div>

Here is my Header CSS:

   /* Header */
   #header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
  .right_header{color: #fff; position: absolute; top: 70px; right: 0px}

Can someone please tell me the proper way to accomplish this please?

Note the left side will have a logo there that will not load in JFiddle!

Thanks!

Upvotes: 37

Views: 165732

Answers (6)

Josh Crozier
Josh Crozier

Reputation: 241208

You can easily just float it to the right, no need for relative or absolute positioning.

.right_header {
    color: #fff;
    float: right;
}

Updated jsFiddle - might need to add some padding/margins - like this.

Upvotes: 46

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

You can do this way also if you want to do with position, Try this please

 #header {
    margin: auto; 
    position:relative; 
    width: 1007px; 
    height: 123px; 
    background: url(../images/logo.png) no-repeat 20px; 
    background-color: #37352b; 
    border: 1px solid #862209;
}


.right_header{
    color: #fff; 
    position: absolute; 
    top: 0px; 
    right: 0px
}

Upvotes: 5

Aya Ramzy Abed
Aya Ramzy Abed

Reputation: 11

<div><button>Continue</button></div> to make button on the right of div

<style>
button {
 display:block;
 margin-left:auto;
}
</style>

Upvotes: 0

Flip
Flip

Reputation: 6781

Two more ways to do it:

  1. Using margins on the element you want to position to the right of its parent.
.element {
  margin-right: 0px;
  margin-left: auto;
}
  1. Using flexbox on the parent element:
.parent {
  display: flex;
  justify-content: right;
}

Upvotes: 23

contehhh
contehhh

Reputation: 122

The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.

The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.

The '' should be absolutely position in order for this code to work.

#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}

change it to...

#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}

Upvotes: 1

Will Piers
Will Piers

Reputation: 421

As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.

You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header

Upvotes: 8

Related Questions