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.



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.