title: how to use images at the border of div tag all around to give custom border look?
body: <p>i have set the following css to ger border image of the div container but the problem is that my right image is not coming right on the border but it leaves spaces from the right border side of the div container when it stretches out.</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="left-image"&gt;&lt;/div&gt;
  &lt;div id="main-containts"&gt;
      &lt;div id="data-containts"&gt;
      data
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="right-image"&gt;&lt;/div&gt;
  
  
  
     &lt;div id="bottom"&gt;
  
         &lt;div id="bottom-left"&gt;&lt;/div&gt;
         &lt;div id="bottom-center"&gt;&lt;/div&gt;
         &lt;div id="bottom-right"&gt;&lt;/div&gt;
  
     &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  
  div#container{
      position:relative;
      margin-left:120px;
      margin-right:120px;
      float:top;
      padding-top:0;
      margin-bottom:50px;
      width:auto;
      height:100%;
  }
  div#left-image{
      position:absolute;
      left:0;
      width:28px;
      height:100%;
      float:left;
      background:url(border-left.png) repeat-y;   
      }
  
     div#right-image{
      position:absolute;
      right:0;
      float:right;
      width:30px;
      height:100%;
      margin-right:0;
      background:url(border-right.png) repeat-y;
      }   
      div#bottom{
      position:absolute;
      bottom:0;
      width:100%;
      height:36px;
      z-index:100;
     }
      div#bottom-left{
  width:51px;
  height:36px;
  background:url(corner-left.png) no-repeat;
  float:left;
  }   
  div#bottom-center{
  
  height:36px;
  background:url(bottom-image.png) repeat-x;
  margin-right:49px;
  /*clear:both:*/
  }       
      div#bottom-right{
  width:49px;
  height:36px;
  background:url(corner-right.png) no-repeat;
  float:right;
  margin-top:-36px;
  
  }       
  </code></pre>