CSS basic div and layout

[zikrija]

Hi all
I try to create web page
Header sections is OK but content is not ok. I try to achieve that left,middleline,pano,and right is repeated until the end of the central part(<div class="midleText">)ie. they have the same height as this central part.
Also I try In the left (.left) to have one picture on top,middle repeted picture and sec. in the bottom. And this left block have same size like middleText .How can I do that.

Tnx. very much

#page {
margin:0px auto;
top:0px;
left:5px;
position:absolute;
width:1000px;
}
.headerTop {
background-color:#31312a;
background-image:url(images/topHeader.jpg);
height:54px;
border-bottom:#FFFFFF 1px solid;
}
.headerTopDatum {
position:absolute;
top:10px;
right:20px;
color:#FFFFFF;
}
.navigationBack {
background-image:url(images/navigation.jpg);
background-color:#bb231b;
height:39px;
width:100%;
}
.bannerBack {
background-image:url(images/bannerBakground.jpg);
background-color:#FFFFFF;
height:162px;
width:100%;
}
.bannerPos {
position:absolute;
left:24px;
margin-top:20px;
}

#content {
width:100%;
left:5px;
display:inline;
}

.left {
width:24px;
background-color:#e6e6e6;
float:left;

}

.midleText {
width:678px;
border:0px;
float:left;
}

.middleline {
width:24px;
background-image:url(images/middle.jpg);
float:left;
}
.pano {
width:250px;
background-color:#e6e6e6;
float:left;
}
.right {
width:24px;
float:left;
background-image:url(images/right.jpg)
}
.bottom {
background-image:url(images/bottom.jpg);
width:100px;
}

HTML

<div id="page">
<div class="headerTop">
<div class="headerTopDatum">
<p>Datum labela</p>
</div>
</div>
<div class="navigationBack">
</div>
<div class="bannerBack">
<div class="bannerPos">
<img src="images/banner.jpg" alt="">
</div>
</div>

<div id="content">
<div>
<div class="left">
<img src="images/left.jpg" alt="">
</div>
<div class="midleText">
<img src="images/proba.jpg" alt="">
</div>


<div class="middleline">&nbsp;</div>
</div>
<div class="pano">&nbsp;</div>
<div class="right">&nbsp;
</div>
</div>
</div>