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/
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?
Answer
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...