title: CSS style for container with transparent border images
body: <p>Want to make a page layout such as the picture below. There are three major components, <code>frameleft</code>, <code>framemid</code> and <code>frameright</code>. While <code>framemid</code> houses the page content, the other two components are just borders with transparent <code>.png</code> files in them.</p>
  
  <p>Question is how to make <code>frameleft</code> and <code>frameright</code> scale properly with <code>framemid</code>? I found a similar question posed earlier <a href="https://stackoverflow.com/questions/282489/div-w-border-images" title="Previous Question">here</a>, but the technique described by the answer following the accepted one (which doesn't solve the problem at all), does not apply when the images in the side components are transparent.</p>
  
  <p><img src="https://i.stack.imgur.com/NbEQO.jpg" alt="Layout"></p>
  
  <p>My solution so far relies on housing these components in a div and setting its height manually. It's obviously not optimal, since I would ideally have the entire ensemble inferring this height from <code>framemid</code>.</p>
  
  <p><strong>HTML</strong> houses the three components inside a div with predefined height.</p>
  
  <pre><code>&lt;div style="height: 500px"&gt;
      &lt;div class="frameside frameleft"&gt;&lt;/div&gt;
      &lt;div class="framemid"&gt; some content &lt;/div&gt;
      &lt;div class="frameside frameright"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong> scales the side images with respect to the housing component.</p>
  
  <pre><code>.frameside {
      background-repeat: repeat-y;
      float: left;
      width: 10px;
      height: 100%;
  }
  
  .frameleft { background-image: url("frame_left.png"); }
  
  .frameright { background-image: url("frame_right.png"); }
  
  .framemid {
      width: 500px;
      float: left;
  }
  </code></pre>
  
  <p>I'd rather not have to accept a CSS3 or HTML5 solution/trick, because this has to work with most browsers.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>See this <a href="http://jsfiddle.net/kAesm/6/" rel="nofollow noreferrer">jsfiddle</a>, courtesy of Warface, for a play-able-version.</p>