3 columns layout

Hi!
I'm trying to make a 3 columns layout using divs. I want them in this order column1(Liquid),column 2(Fixed and in center on x-axis),column 3(Liquid).

The problems I'm facing are:

• The liquid columns are not actually behaving like liquid columns even after setting width to 100% or auto.
• The fixed column do not appear in the center of the page, that might be because if the liquid columns work properly and stretch the column 2(fixed) would appear in the center.
• And I want column 1 and 3 to increase the height as the hight of the column 2 increases, i have tried to set their height to auto and 100% but it is not working.

Below is the code I have tried. I would really appreciate the help.

HTML

<div id="wrapper">
	<div id="leftbg">Content for  id "leftbg" Goes Here</div>
  	<div id="page">
  	  <p>Content for  id "page" Goes </p>
  	</div>
  <div id="rightbg">Content for  id "rightbg" Goes Here</div>
</div>

CSS

#wrapper #page {
	width: 750px;
	margin: 0px;
	padding: 0px;
	float: left;
	background-color: #FF0;
}
#wrapper #leftbg {
	padding: 0px;
	float: left;
	width: auto;
	background-color: #F00;
	margin: 0px;
	height: auto;
}
#wrapper #rightbg {
	padding: 0px;
	float: left;
	width: auto;
	background-color: #0CF;
	margin: 0px;
	height: auto;
}
#wrapper {
	margin: 0px;
	padding: 0px;
	height: auto;
	width: auto;
	background-color: #0FF;
}