I currently have the following layout for my webpage:

```
  <div class="content-body">
    <div class="left-content-bar siteborder"></div>
    <div class="inner-content">
    ... some content
    </div>
    <div class="right-content-bar siteborder"></div>
  </div>

```

I have made a repeating background-image for left and right content bar. I want the bar to always go from the top of the page to the end of the page. My current problem is, that the bars only take as much space as the inner-content (the bars end at the bottom end of the content)

I found a solution, so that the bars will always go to the bottom, but this includes a min-height which I don't like, because it will have a lot of whitespace with a small screen resolution.

See this css for my current solution (The height will always be minimum 1000px with this, and this shouldn't be):

```
.content-body{
position:relative;
overflow:hidden;
min-height: 1000px;
height: auto !important;
height: 1000px;
}
.left-content-bar{
    float:left;
    position:relative;
    width: 10px;
    background-image: url(/default/images/content-left.png);
    background-repeat:repeat-y;
    margin:0px;
    padding:0px;
    padding-bottom: 32000px;
    margin-bottom: -32000px; 
}
.right-content-bar{
    float:left;
    position:relative;
    width: 14px;
    background-image: url(/default/images/content-right.png);
    background-repeat:repeat-y;
    margin:0px;
    padding:0px;
    padding-bottom: 32000px;
    margin-bottom: -32000px;    
}
.inner-content{
float:left;
width:956px;
position: relative;
height: auto;
min-height: 100% !important;
}

```

I hope that anyone can give me a better solution than my current