100% height in specific case not working

The small div in the attached image doesnt stretch to 100%.

Here is the html:

<div class="content-wrapper">
        <div class="top">
              <div class="left"></div>
              <div class="center"></div>
              <div class="right"></div>
        </div>
        <div class="content">
              <div class="left"></div>
              <div class="center">
              <div id="content" class="column"><div class="section"></div>
              <div class="right"></div>
        </div>
        <div class="bottom">
              <div class="left"></div>
              <div class="center"></div>
              <div class="right"></div>
        </div>
</div>

And here the CSS:
.content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom,
.content-wrapper .left,
.content-wrapper .center,
.content-wrapper .right {
float: left;
}

.content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom {
width: 100%;
padding: 0px 8px;
}

.content-wrapper .center {
width: 100%;
}

.content-wrapper .left,
.content-wrapper .right {
height: 100%;
min-height: 100%;
}

.content-wrapper .left {
width: 8px;
margin-left: -8px;
background: url("../images/side_left_bg.png") repeat-y;
}

.content-wrapper .right {
width: 8px;
margin-right: -8px;
background: url("../images/side_right_bg.png") repeat-y;
}

.content-wrapper .top,
.content-wrapper .bottom,
.content-wrapper .top .center,
.content-wrapper .bottom .center {
height: 9px;
}

.content-wrapper .top .left {
background: url("../images/edge_top_left.png") no-repeat;
}

.content-wrapper .center {
background: white;
}

.content-wrapper .top .right {
background: url("../images/edge_top_right.png") no-repeat;
}

.content-wrapper .bottom .left {
background: url("../images/edge_bottom_left.png") no-repeat;
}

.content-wrapper .bottom .center {
background: url("../images/bottom_bg.png") repeat-x;
}

.content-wrapper .bottom .right {
background: url("../images/edge_bottom_right.png") no-repeat;
}

Thanks in advance!