title: CSS: How does Width work as a percentage?
body: <p>I'm having what I think is a weird problem. I have one div, inside a parent div, and I'm giving the child div a width of 100%, but it's not growing to the size of the parent div.</p>
  
  <p>The parent div does <strong>not</strong> have a set width of any kind. So my question: does width in percentage only work when a parent element has a set width, or should it grow anyway?</p>
  
  <p>CLARIFICATION:</p>
  
  <p>Some may be wondering how the parent div has a width to grow to at all, if it itself does not have a set width. The reason is I have other siblings of the child element inside the parent div, with a set width to them, so the parent div has grown to meet those sibling widths.</p>
  
  <p>CODE SAMPLE:</p>
  
  <pre><code>&lt;div id="parent-div"&gt;
      &lt;div id="child-element" style="width: 100%"&gt;Content&lt;/div&gt;
      &lt;div id="sibling" style="width: 250px"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Child element is not growing to meet the parent div. The width of 100% is essentially not doing anything at all that I can tell. This is in IE7.</p>
  
  <p>Thanks.</p>
  
  <p><strong>FOLLOW-UP</strong>: Thanks everyone for the answers. I'm busy testing on my end. I originally thought that parent div's only grow as wide as their children, but it turns out I was wrong given my example above, which I coded only to demonstrate my issue I'm having. In my case, my parent div has a <code>position: fixed</code> and <code>bottom: 1px</code> and <code>right: 1px</code> applied to it. From my tests, this appears to change the behavior of the parent div. No longer does it automatically stretch to the entire width of the page, but assumes the behavior I thought was the case anyway, which is the parent div expands only enough to accommodate its widest child. So that's the behavior I'm seeing now, but only because my parent div has a fixed position.</p>