html - CSS style for container with transparent border images -

want make page layout such picture below. there 3 major components, frameleft, framemid , frameright. while framemid houses page content, other 2 components borders transparent .png files in them.

question how make frameleft , frameright scale framemid? found similar question posed earlier here, technique described answer following accepted 1 (which doesn't solve problem @ all), not apply when images in side components transparent.

my solution far relies on housing these components in div , setting height manually. it's not optimal, since ideally have entire ensemble inferring height framemid.

html houses 3 components inside div predefined height.

<div style="height: 500px">     <div class="frameside frameleft"></div>     <div class="framemid"> content </div>     <div class="frameside frameright"></div> </div> 

css scales side images respect housing component.

.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; } 

i'd rather not have accept css3 or html5 solution/trick, because has work browsers.

edit

see jsfiddle, courtesy of warface, play-able-version.

does need go in left/right other background? – thirtydot

@thirtydot maybe in future - "yes", let's "no", now.

if stuff might need go in there, option: http://jsfiddle.net/m5uqw/ (try resizing window)

it works in ie7+ , modern browsers.

html:

<div class="frameouter">     <div class="frameside frameleft"></div>     <div class="framemid">content</div>     <div class="frameside frameright"></div> </div> 

css:

.frameouter {     border: 2px solid #444;     overflow: hidden;     position: relative } .frameside {     background-repeat: repeat-y;     width: 10px;     position: absolute;     top: 0;     bottom: 0 } .frameleft {     background-image: url(http://dummyimage.com/64x64/f0f/fff);     left: 0 } .frameright {     background-image: url(http://dummyimage.com/64x64/00f/fff);     right: 0 } .framemid {     margin: 0 10px;     background: #ccc }