Full width layout height problem

[CrazeD]

I don't normally make full width liquid layouts, so this one has me a little stumped. The problem is that my borders on the sides are not stretching with the main content, and I need to make it so they do.

html:

<div class="wrapper">
 <div class="left"></div>
 <div class="mid-wrapper">
 <div class="mid">
 <div class="content">
 <div style="height:1000px;background:#eee;"></div>
 </div>
</div>
 </div>
 <div class="right"></div>
</div>

CSS:

.wrapper {
width:100%;
background:#dedede;
height:auto !important;
height:100%;
min-height:100%;
}
.wrapper .left, .wrapper .right {
width:35px;
background:url(images/border_left.gif) repeat-y right #787878;
position:absolute;
height:auto !important;
height:100%;
min-height:100%;
margin-bottom:-2000px;
padding:bottom:2000px;
z-index:1;
}
.wrapper .right {
background:url(images/border_right.gif) repeat-y left #787878;
right:0px;
}
.wrapper .mid-wrapper {
position:absolute;
width:100%;
background:#ccc;
height:auto !important;
height:100%;
z-index:0;
}
.wrapper .mid-wrapper .mid {
padding:0px 35px 0px 35px;
}
.content {
padding:0px 5px 0px 5px;
}

Also if you have a better solution than what I could come up with for a full width liquid layout with borders on the sides, by all means, suggest away.

Thanks.

[edited by: tedster at 6:58 pm (utc) on July 5, 2009]

[andrewsmd]

I don't have the code but I would recommend displaying your middle dive background over the whole page, then putting the images into one div where they go on the left, then the main, and then right. Then you can just specify how big your images need to be. It's hard to tell what you want without your images though.