title: Specify right margin in fixed positioning
body: <p>I have no idea how to title this properly, but here is my problem: </p>
  
  <p>I have this layout:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;div id="content"&gt;this is my page&lt;/div&gt;
      &lt;div id="button"&gt;magic button&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>#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;
  }​
  </code></pre>
  
  <p>See fiddle here: <a href="http://jsfiddle.net/n6UPF/" rel="noreferrer">http://jsfiddle.net/n6UPF/</a></p>
  
  <p><img src="https://i.stack.imgur.com/BLW5H.png" alt="image"></p>
  
  <p>My page works just as I want it, the button is exactly where I want it to be. </p>
  
  <p><strong>But</strong> if I change the text on my button, it is no longer positioned properly. </p>
  
  <p>I would like to position it "fixed" relative to the right edge of my content area. </p>
  
  <p>Can this be done in pure CSS? </p>