title: position:fixed and width:inherit with percentage parent
body: <p>I'm trying to give a <em>fixed</em> element a <code>width</code> of a percentage parent (here <code>#container</code>). When I use pixel instead of the percentage then it works. How can I do it? Is this possible with <strong>CSS</strong>?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="outer"&gt;
    &lt;div id="container"&gt;
      &lt;div id="fixed"&gt;
          Sitename
      &lt;/div&gt;               
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#outer{
    width:300px;
    border: 1px solid yellow;   
  }
  
  #container {
    width: 90%; /*When I use e.g 250 px it works. But I need it in percentage*/
    border: 1px solid red;
    height: 300px;
  }
  
  #fixed {
    position: fixed;
    width: inherit;
    border: 1px solid green;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/NfA2Z/4/">JSFiddle</a></p>
  
  <p><strong>Add:</strong></p>
  
  <p>I need <code>position:fixed</code>. Because I want to place it at the bottom of the page like this:</p>
  
  <p><a href="http://jsfiddle.net/NfA2Z/8/">JSFiddle</a></p>
  
  <p>Solution with <code>position:relativ</code> doesn't work for me.</p>