Placing an Element to the right side with CSS

问题

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!

回答1:

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.

回答2:

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

回答3:

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}

回答4:

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

来源：https://stackoverflow.com/questions/19263524/placing-an-element-to-the-right-side-with-css

标签

html

css