title: Div with Border Images
body: <p>What is a good way to set up a single container div with some border images surrounding it (in my case only on the left, bottom, and right sides)? I have it centered at the top of the page, overlapping everything else (so like that OSX-style slide-down dialog).</p>
  
  <p>Here's the basic layout:</p>
  
  <p><img src="https://i.stack.imgur.com/HoGAj.jpg" alt="alt text"></p>
  
  <p>Here's what I've got so far (can I avoid a static width/height for the content?):</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="contentbox"&gt;
      &lt;div class="contentbox-wrapper" style="width: 400px"&gt;
          &lt;div class="contentbox-mid" style="height: 200px"&gt;
              &lt;div class="contentbox-w"&gt;&lt;/div&gt;
              &lt;div class="contentbox-content"&gt;
                  Content Box Test
              &lt;/div&gt;
              &lt;div class="contentbox-e"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="contentbox-bottom"&gt;
              &lt;div class="contentbox-sw"&gt;&lt;/div&gt;
              &lt;div class="contentbox-s"&gt;&lt;/div&gt;
              &lt;div class="contentbox-se"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.contentbox {
      width: 100%;
      position: fixed;
      z-index: 2;
  }
  
  .contentbox-wrapper {
      width: 300px;
      margin-left: auto;
      margin-right: auto;
  }
  
  .contentbox-mid {
      height: 100px;
  }
  
  .contentbox-w {
      width: 30px;
      height: 100%;
      background: transparent url("../../images/contentbox_w.png");
      float: left;
  }
  
  .contentbox-content {
      width: auto;
      height: 100%;
      background: #e8e8e8;
      float: left;
  }
  
  .contentbox-e {
      width: 30px;
      height: 100%;
      background: transparent url("../../images/contentbox_e.png");
      float: left;
  }
  
  .contentbox-bottom {
      width: 300px;
      height: 30px;
  }
  
  .contentbox-sw {
      width: 30px;
      height: 30px;
      background: transparent url("../../images/contentbox_sw.png");
      float: left;
  }
  
  .contentbox-s {
      height: 30px;
      background: transparent url("../../images/contentbox_s.png");
      margin-left: 30px;
      margin-right: 30px;
  }
  
  .contentbox-se {
      width: 30px;
      height: 30px;
      background: transparent url("../../images/contentbox_se.png");
      float: right;
      position: relative;
      bottom: 30px;
  }
  </code></pre>