CODEWITHSUNDEEP
csspositioningcss-position
Sam Saffron
Sam Saffron

Reputation: 131112

Specify right margin in fixed positioning

I have no idea how to title this properly, but here is my problem:

I have this layout:

<html>
<body>
    <div id="content">this is my page</div>
    <div id="button">magic button</div>
</body>
</html>

css: 

#button {
  position: fixed;
  bottom: 20px;
  background-color: #f00;
  padding: 5px;
  left: 50%;
  margin-left: 250px;

}

html, body{
  height: 100%;
}
#content {
  margin: 0 auto;
  width: 700px;
  min-height: 100%;
  background-color: #eee;
}​

See fiddle here: http://jsfiddle.net/n6UPF/

image

My page works just as I want it, the button is exactly where I want it to be.

But if I change the text on my button, it is no longer positioned properly.

I would like to position it "fixed" relative to the right edge of my content area.

Can this be done in pure CSS?

Upvotes: 10

Views: 21384

Answers (6)

John Lloyd
John Lloyd

Reputation: 1

Try changing

#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}

to

#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
right:20px
}

Upvotes: 0

Ry-
Ry-

Reputation: 224942

If modifying the HTML is acceptable, you can use a wrapper:

<div id="button-wrapper">
    <div id="button">magic button</div>
</div>

#button-wrapper {
    bottom: 40px;
    left: 50%;
    margin-left: 350px;
    position: fixed;
}

#button {
    background-color: red;
    padding: 5px;
    position: absolute;
    right: 10px;
    white-space: nowrap;
}

http://dabblet.com/gist/3740941

No, it's not really pretty, but...

Upvotes: 10

ddb
ddb

Reputation: 1406

I am wondering if you are looking for the float:right property. Can you look at http://jsfiddle.net/n6UPF/1/ and see if that is what you were looking for.

Upvotes: 0

Mallioch
Mallioch

Reputation: 1416

Do you mean...

#button
{
    position: fixed;
    right: 20px;
}

...or whatever distance you want on the right? Or something else?

Upvotes: 1

RL Nabors
RL Nabors

Reputation: 86

Usually when I run into trouble with exact positioning, it's because I haven't specified the width of my positioned element. The browser will try to calculate it itself, and that can throw things off.

Is there any way you can post what it looks like when it's no longer positioned properly?

Upvotes: 0

xanido
xanido

Reputation: 1231

I'm not sure if I fully understand your question correctly, but could you not just use the right property instead of left?

Example: http://jsfiddle.net/baKra/

Upvotes: 0

Related Questions