How to set background-image 100% with floats?

Question

I ve tried to set the left-right borders as a background-image with repeat-y=100%, but it didn t work. It works fine when I set the outer box to strict height like 100px, but I need it to be 100% either. The CSS:

      .border_left {
    background:url('borderLeft.png') top left repeat-y;
    height:100%;
    width:14px;        
    float:left;
  }
  .border_right {
    background:url('borderRight.png') top right repeat-y;
    height:100%;
    width:14px;        
    float:left;
  }
  .center_box {
     height:100%;
     float:left;
  }

HTML:

  <div>
   <div class="border_left"></div>
   <div class="center_box">
     sdvfdsfvdfs
     vsdfvdsfv<br/>
     sdfvdfvdsfvd
     sdfvdsfvdsfv<br/>
     sdfv<br/>
     sdfvvsdfvdfs<br/>
     sdfvdfs<br/>
   </div>
   <div class="border_right"></div>
   <div style="clear:both;"></div>
 </div>

As U can see everything is simple, but do not work at all, I've also tried to set min-height:100px; - this just solves the problem only stretching it by 100px. PS In shorthend description - I need the 2 borders repeat-y=100% within the inner content. Sorry for my English =)

Answer 1

Change your "float" style into an absolute position style:

.border_left {
    background: url('borderLeft.png') top left repeat-y;
    height: 100%;
    width: 14px;
    position: absolute;
    left: 0px;
}

.border_right {
    background: url('borderRight.png') top right repeat-y;
    height: 100%;
    width: 14px;
    position: absolute;
    right: 0px;
}

Answer 2

set the height for outer containet to 100%

Let me know if that help.