title: Assigning CSS width to a position:fixed element
body: <p>I'd like a fixed element's width to match that of the div placed immediately below it. Imagine a header and a main content div. A problem in matching their widths occurs when the header and content divs are nested inside an outer div. In this scenario the % widths of each no longer match their parents width (e.g.,<code>&lt;body&gt;</code> tag) and the fixed element's width is based on something which is confusing me.</p>
  
  <p>To better explain what I mean, contrast these two js fiddles:</p>
  
  <ol>
  <li><a href="http://jsfiddle.net/2dudX/4/" rel="nofollow">http://jsfiddle.net/2dudX/4/</a><br>
  <strong>vs.</strong> </li>
  <li><a href="http://jsfiddle.net/2dudX/10/" rel="nofollow">http://jsfiddle.net/2dudX/10/</a></li>
  </ol>
  
  <p>here's the code for each:</p>
  
  <pre><code>&lt;div id="fixed"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;&lt;/div&gt;​
  
  #fixed{ position:fixed; z-index:2; width:90%;
          height:25px; background:yellow;}
  #content{ width:90%; height:300px; background:red}
  </code></pre>
  
  <p><strong>vs.</strong> </p>
  
  <pre><code>&lt;div id="main"&gt;
     &lt;div id="fixed"&gt;&lt;/div&gt;
     &lt;div id="content"&gt;&lt;/div&gt;    
  &lt;/div &gt; 
  
  #main{ width:95%}
  #fixed{ position:fixed; z-index:2; width:90%;
          height:25px; background:yellow;}
  #content{ width:90%; height:300px; background:red}
  </code></pre>
  
  <p>Note only in jsfiddle #1 do the yellow and red divs widths match up regardless of how you resize the browser. Unfortunately, jsfiddle#2 is more of a real world scenario and I'm wondering how to correct the <code>id="fixed"</code> div such that its width also matches up with <code>id="content"</code> div.</p>
  
  <p>Thoughts?</p>