1 reply [Last post]
fhm
Offline
newbie
Last seen: 12 years 31 weeks ago
Timezone: GMT-7
Joined: 2010-06-27
Posts: 1
Points: 2

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;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 33 min 26 sec ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Might be best to find an

Might be best to find an existing layout or tutorial that does what you need and modify it. Floats without set widths can be problematic.