CSS style for container with transparent border images

Want to make a page layout such as the picture below. There are three major components, frameleft, framemid and frameright. While framemid houses the page content, the other two components are just borders with transparent .png files in them.

Question is how to make frameleft and frameright scale properly with framemid? I found a similar question posed earlier here, 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.

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 framemid.

HTML houses the three components inside a div with predefined height.

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

CSS scales the side images with respect to the housing component.

.frameside {
    background-repeat: repeat-y;
    float: left;
    width: 10px;
    height: 100%;
}

.frameleft { background-image: url("frame_left.png"); }

.frameright { backgrou开发者_如何转开发nd-image: url("frame_right.png"); }

.framemid {
    width: 500px;
    float: left;
}

I'd rather not have to accept a CSS3 or HTML5 solution/trick, because this has to work with most browsers.

EDIT

See this jsfiddle, courtesy of Warface, for a play-able-version.

UPDATED

Then look at this

http://jsfiddle.net/kAesm/3/

Set the html, body to 100% height then on the frameid set the min-height to 100% it should do the trick. Just remove the borders I've added to make it easier to look.

add

html, body{
   height:100%;
}

modify this too

.frameid{
   ...
   min-height:100%;
}

LINK TO EXAMPLES

http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

Check this out: http://jsfiddle.net/thilakar/kAesm/11/

Please add the below style

.container div{
    padding-bottom:300px;
    margin-bottom:-300px;
}

Above style will affect the three div(frameleft, frameid and frameright) and also you can add one more style that container part that

.container {
   overflow:hidden;    
}

below full part

Html

<div class="container">
    <div class="frameside frameleft">Left</div>
    <div class="framemid">
        <p>some content
            sdfklsjdf
            lsdkfjsdlfkj
        </p>
        <p>some content
            sdfklsjdf
            lsdkfjsdlfkj
        </p>
        <p>some content
            sdfklsjdf
            lsdkfjsdlfkj
        </p>        
        </div>
    <div class="frameside frameright">Right</div>
</div>

CSS:

html,body{
    height:100%
}

.frameside {
    background-repeat: repeat-y;
    float: left;
    width: 30px;
    background:#ccc;
}
.container {
 overflow:hidden;   
}
.container div{
    padding-bottom:300px;
    margin-bottom:-300px;
}

.frameleft {
    background-image: url("frame_left.png");
    float:left;
}
.frameright {
    background-image: url("frame_right.png");
    float:left;
    background:#ccc;
}

.framemid {
    width: 300px;
    float: left;
    background:#999;
}

Does anything need to go in the left/right other than the background? – thirtydot

@thirtydot Maybe in the future - "yes", but let's say "no", for now.

If stuff might need to go in there, this is an option: http://jsfiddle.net/M5UqW/ (try resizing the window)

It works in IE7+ and all 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
}

Ok. I know you didn't ask for a scripting solution but jQuery can do this quite easily.

var h = $('.framemid').height();
$('.frameside').height(h + 'px');

http://jsfiddle.net/jasongennaro/kAesm/7/

None of the jsfiddle examples i have seen 3, 6, 10 url are not working in IE8. Why dont you use a table and try it.