3 column fluid layout HELP!!

therise03 · 03-04-2009, 01:38 PM

I am having trouble.. I need to make a fluid layout for a website with 3 columns. The two outside ones need to be equal width, and the middle one is a main content area which is going to be larger in width.Below is the css code I have been using. The problem is when I minimize the site using IE the middle drops out to the bottom and leaves a large white space where it used to be, surrounded by the two outside columns. Please help!!!

p.s. what is the best method to make a 3 column fluid layout ????
????: NamePros.com http://www.namepros.com/web-design-discussion/564416-3-column-fluid-layout-help.html

#header {
background-color:#FFFFFF;
text-align: center;
}

#left {
float:left;
width:100px;
padding:0.5em;
background-color:#ffffff;
text-align: center;
}

#right {
float:right;
width:100px;
padding:0.5em;
background-color:#ffffff;
text-align: center;
}

#center {
background-color:#ffffff;
width: 75%;
padding: 0.5em;
margin-left: 100px;
margin-right: 80px;
}

#footer {

clear:both;
background-color:#CCC08F;
padding:.5em;
background-color: white;
font-size: 12px;
text-align: center;
padding-top: 30px;
}

#container {
width: 90%;
margin: 0 auto;
background-color: white;
}

FathomJH · 03-04-2009, 01:50 PM

Give this a go:

http://www.nowcss.com/layouts/css-fluid-layout-tutorial

Should help

Try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
????: NamePros.com http://www.namepros.com/showthread.php?t=564416
<title>Untitled Document</title>
<style type="text/css">

#left {
float:left;
width:15%;
}
#right {
float:right;
width:15%;
}
#center {
margin: 0 15% 0 15%;
}
#container {
width: 90%;
margin: 0 auto;
background-color: white;
}

</style>

</head>

<body>

<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>

</body>
</html>

Your problem might be setting a width to #center.

and the "sidebars" should be floated left and one right. The code I pasted works for me, hope it does for you

therise03 · 03-05-2009, 07:02 AM

thanks a million, a friend told me about this site, and how the forum support was fast and good, and i agree, it was both. I tried the CSS code you gave me and it works perfectly, cant wait to run into more questions to ask! Thanks a lot!

03-04-2009, 01:38 PM	THREAD STARTER #1 (permalink)
therise03 New Member Join Date: Nov 2008 Posts: 15	3 column fluid layout HELP!! I am having trouble.. I need to make a fluid layout for a website with 3 columns. The two outside ones need to be equal width, and the middle one is a main content area which is going to be larger in width.Below is the css code I have been using. The problem is when I minimize the site using IE the middle drops out to the bottom and leaves a large white space where it used to be, surrounded by the two outside columns. Please help!!! p.s. what is the best method to make a 3 column fluid layout ???? ????: NamePros.com http://www.namepros.com/web-design-discussion/564416-3-column-fluid-layout-help.html #header { background-color:#FFFFFF; text-align: center; } #left { float:left; width:100px; padding:0.5em; background-color:#ffffff; text-align: center; } #right { float:right; width:100px; padding:0.5em; background-color:#ffffff; text-align: center; } #center { background-color:#ffffff; width: 75%; padding: 0.5em; margin-left: 100px; margin-right: 80px; } #footer { clear:both; background-color:#CCC08F; padding:.5em; background-color: white; font-size: 12px; text-align: center; padding-top: 30px; } #container { width: 90%; margin: 0 auto; background-color: white; }

03-04-2009, 01:50 PM	#2 (permalink)
FathomJH NamePros Regular Join Date: Oct 2006 Location: U.S. Posts: 413	Give this a go: http://www.nowcss.com/layouts/css-fluid-layout-tutorial Should help Try: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ????: NamePros.com http://www.namepros.com/showthread.php?t=564416 <title>Untitled Document</title> <style type="text/css"> #left { float:left; width:15%; } #right { float:right; width:15%; } #center { margin: 0 15% 0 15%; } #container { width: 90%; margin: 0 auto; background-color: white; } </style> </head> <body> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div> </body> </html> Your problem might be setting a width to #center. and the "sidebars" should be floated left and one right. The code I pasted works for me, hope it does for you Last edited by FathomJH; 03-04-2009 at 02:29 PM.

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

03-05-2009, 07:02 AM	THREAD STARTER #3 (permalink)
therise03 New Member Join Date: Nov 2008 Posts: 15	thanks a million, a friend told me about this site, and how the forum support was fast and good, and i agree, it was both. I tried the CSS code you gave me and it works perfectly, cant wait to run into more questions to ask! Thanks a lot!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)