Content not pushing DIV down : Adobe Dreamweaver

hey guys,
ive been doing some research and it seems that i have a common problem. however, my situation is a bit different and the suggestions i found were not solutions for me.

I have a div called CONTENT that houses 3 other divs inside. below CONTENT is a div called FOOTER. if i give CONTENT a fixed height, it pushes FOOTER down with no problem.

all of my content is placed inside the 3 divs located inside CONTENT. when the content exceeds the height of CONTENT, it makes the div its inside of grow but not CONTENT.

how can i achieve this?

here is my html

<head>



<style>

body {

	background: #FFFFFF url(../images/back_down.jpg) top center no-repeat;

	margin: 0;

	font-family: Arial, Helvetica, sans-serif;

	color: #333333;

	font-size: 11px;

	line-height: 16px;

}



#wrap {

	width: 875px;

	margin: 0 auto;

}



#header {

	background: url(../images/header_down.jpg) no-repeat;

	height: 140px;

	width: 875px;

	float: none;

	margin-top: 40px;

	position: relative;

}



a img {border: none; }



#content {

	background: #FFFFFF url(../images/body_back_down.jpg) no-repeat;

	padding-top: 16px;

	height: 690px;

	width: 875px;

	margin: 0 auto;

	position: relative;

}



#column_left {

	background: url(../images/down_1b.jpg) no-repeat;

	height: 548px;

	width: 178px;

	float: left;

	text-align: right;

	padding: 100px 32px 0 0;

	position: absolute;

	top: 16px;

	left: 0;

}



#column_middle {

	width: 418px;

	padding: 0 25px;

	position: absolute;

	top: 16px;

	left: 210px;

	text-align: left;

}



#column_right {

	height: 665px;

	width: 197px;

	float: right;

	position: absolute;

	top: 16px;

	right: 0;

}



#image {

	float: right;

	margin: 0;

}



#footer {

	background: url(../images/footer_down.jpg) no-repeat;

	height: 50px;

	width: 875px;

	padding-top: 66px;

	line-height: 20px;

	color: #19EFFF;

	clear: both;

}

</style>



</head>

<html>

<body>

<div id="wrap" align="center">



	<div id="header" align="center"></div>



	<div id="content" align="center">

    

		<div id="column_left">My Menu Goes here</div>

        

	    <div id="column_middle"><img src="images/down_header1.jpg" width="418" height="50" /><br />

		

    		<div id="image" align="right"><img width="224" height="281" src="images/hospital.jpg" /></div>

        	This is where my content goes

		

	    </div>

        

		<div id="column_right"> <a href="calculator.html"><img src="images/bmi.jpg" border="0" /></a> </div>

        

	</div>

      

	<div id="footer" align="center"><a href="index.html">Home</a>  |  <a href="about.html" > About Us</a> |  <a href="blog.html" >Blog</a>  | <a href="weight_loss.html" >Weight

	    Loss Surgery</a> | <a href="why.html" >Why

	    Us?</a> | <a href="before.html" >Before & After</a> | <a href="candidate.html" >Am

	    I Candidate?</a> | <a href="resources.html" >Resources</a> | <a href="contact.html" >Contact</a> | <a href="site_map.html" >Site

	    Map</a><br />

	</div>

    

</div>

</body>

</html>