css 3 column div layout problem [lots of pics and code]

[mims92]

Hello, I have been busy building a website for one of my schools organizations. I ran into a problem with my 3 row div structure.

http://i49.tinypic.com/15mgww1.png

Now my problem is with the middle row. It will only go stretch and fill up the page when there is an overflow of text inside it.

http://i50.tinypic.com/2m7tafl.png

As you can see I have been putting in some dumb block at the top with useless text up until now in order to make the div stretch.

But when removed you get this...

http://i48.tinypic.com/ayrdau.png

My question is how do I fix this? I want it to stretch to the end of the page without having to fill it with useless "fill" text.

This is my .css for the 3 divs.


#middle{
margin: 0 200px 20px 200px;
position: absolute;
z-index: 3;
top: 210px;
left: 0px;
}
#left{
position: absolute;
top: 210px;
left: 0px;
}
#right{
position: absolute;
z-index: 1;
top: 210px;
right: 0px;
}

I tried to add width:100%; to the middle column but then it goes too far and I get this.

http://i48.tinypic.com/kd68zm.png

Changing it to a lower percentage like 75% works for my resolution. But when i take my window and shrink it overlaps the right column again. So I'm guessing width with a %% is out of the question, unless im doing something wrong?

[monicasaha]

]*{
margin:0;
padding:0;
}
#middle{
margin:0 315px 0 215px;

border:4px solid #330000;
height:300px;
}
#left{

border:4px solid #00FF00;
height:300px;
width:200px;
float:left;
}
#right{
width:300px;
float:right;
border:4px solid #99FF00;
height:300px;
}


<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>

u can try this

Good luck!

[europe451]

You can also try to create a width % for each of the divs

ie.


#left {
width: 15%;
}
#middle {
width:70%;
}
#right {
width: 15%;
}

Make the widths whatever they need to be though.