title: Automatically fill middle repeated div horizontally
body: <p>I have essentially three divs.</p>
  
  <pre><code>&lt;div id="headerLeft"&gt;&lt;/div&gt;
  &lt;div id="headerMiddle"&gt;&lt;/div&gt;
  &lt;div id="headerRight"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>With the following CSS</p>
  
  <pre><code>#headerLeft
  {
  background-image: url("topLeft.png");
  height: 88px;
  width: 329px;
  float:left;
  }
  #headerMiddle
  {
  background-image: url("topMiddleRepeat.png");
  background-repeat:repeat-x;
  position:relative;
  height: 73px;
  float:left;
  color: white;
  min-width:100px;    
  padding-top: 15px;
  }
  #headerRight
  {
  background-image: url("topRight.png");
  float: left;
  height: 87px;
  width: 47px;
  float:right;
  }
  </code></pre>
  
  <p>I need the middle div to repeat horizontally to fill the rest of the header's space. I can't set the width of the div manually because this html will be inserted into other pages of unknown widths.</p>
  
  <p>I've tried setting the width to 100% but that just fills up the whole line and pushes the leftHeader above the middleHeader and the rightHeader below the middleHeader.</p>
  
  <p>Here is the page I am currently trying to manipulate. <a href="http://dl.dropbox.com/u/1501628/web/ipiphony.html" rel="nofollow">http://dl.dropbox.com/u/1501628/web/ipiphony.html</a></p>
  
  <p>Any help would be greatly appreciated.</p>