33

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!

Flip
  • 6,233
  • 7
  • 46
  • 75
Frank G.
  • 1,519
  • 7
  • 25
  • 43

6 Answers6

38

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.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • 3
    That did it!!! Ugg why didn't I think of that hahaha I'm sorry I should have got it! Now I'm disappointed been trying to learn this stuff and I missed it. Thank you! – Frank G. Oct 09 '13 at 05:05
  • 3
    Beat me to it, +1 :P Further reading: This will come useful when floating things inside non-floated containers: http://www.webtoolkit.info/css-clearfix.html – francisco.preller Oct 09 '13 at 05:06
  • 3
    @francisco.preller Yea, that might be helpful. Alternatively, applying `overflow:hidden` to the parent works essentially the same as a clearfix - forcing it to contain it's children. – Josh Crozier Oct 09 '13 at 05:08
  • 1
    Didn't know about overflow:hidden, nice thanks. Seems there are some caveats: http://stackoverflow.com/questions/5565668/is-clearfix-deprecated – francisco.preller Oct 09 '13 at 05:11
  • @francisco.preller that link was helpful! Thank you!! – Frank G. Oct 09 '13 at 05:18
14

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;
}
Flip
  • 6,233
  • 7
  • 46
  • 75
8

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

Will Piers
  • 421
  • 2
  • 8
  • 13
  • Thank you that was very helpful! But float can do it to. Is there any difference between using a float or position? Or I should say is it better to use position vs float? – Frank G. Oct 09 '13 at 05:14
  • 1
    @FrankG. I usually avoid absolute positioning for the exact reason you were mentioning, however floats have their downfalls too. It's worth mentioning that absolutely positioned elements are taken out of the normal flow. – Josh Crozier Oct 09 '13 at 05:16
4

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}
Dinesh Kanivu
  • 2,551
  • 1
  • 23
  • 55
1

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;}
contehhh
  • 122
  • 1
  • 11
0

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

<style>
button {
 display:block;
 margin-left:auto;
}
</style>
Aya Ramzy Abed
  • 11
  • 4