title: CSS Stretch to Available Width
body: <p>How do I make a block-level element, such as a <code>div</code> stretch to the available width?</p>
  
  <p>I know that this may seem like a question with an obvious answer, but it is a tad bit more complicated that it seems, have a look at this Fiddle:</p>
  
  <p><a href="http://jsfiddle.net/spryno724/pZKgv/" rel="nofollow">http://jsfiddle.net/spryno724/pZKgv/</a></p>
  
  <p>The CSS sets a left and right margin for the containing <code>div</code> to 20% on each side. Setting the <code>width</code> property causes it to stretch 100% of the <em>original</em> available space, causing it to spill off the side of the screen when the 20% margins are added to each side.</p>
  
  <p>How can this be fixed, such that 20% margins still exist, but the <code>div</code> stretches to fill the remaining space in between?</p>