2 replies [Last post]
CrazyTegger
Offline
newbie
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 3
Points: 0

Hi guys, I've been looking around the site and found a few topics around this general subjet, but I couldn't quite seem to get them to work. I am using IE6, and new to CSS. I need some help with a little bug that's been driving me nuts.

Here's the deal:

I've got 3 columns: leftnav, content and rightnav, followed by a footer.

My problem is that my left and right navs aren't lining up with my content. I want them to be flush and equal depending on what the longest column(so to speak) is.

Thanks for the help guys.

body{
	font-family:Geneva, Arial, Helvetica, sans-serif;
	background-color:#111111;
	}
	
#container
{
	width: 95%;
	margin:  2.5%;	
	background-color: #fff;
	color: #333;
	line-height: 130%;
}

#top
{
	padding: 1% 1% 1% 1%;
	background-color: #FF9900;
	border-bottom: 1px solid gray;
}

#header
{
	padding: 1% 1% 1% 1%;
	background-color: #ffffff;
}

#globalnav
{
	background-color:#CC0000;
	color:#FFFFFF;
	font-weight:bold;
}

#leftnav
{
	overflow:hidden;
	background-color:#FF9900;
	float: left;
	padding: 1% 1% 1% 1%;
}

#rightnav
{
	overflow:hidden;
	background-color:#FF9900;
	float: right;
	padding: 1% 1% 1% 1%;
	
}

#content
{
	display:table;
	background-color:#FFFFFF;
	margin-left: 192px;
	margin-right: 16%;
}

#footer
{
	clear: both;
	margin: 0;
	color: #333;
	background-color: #ddd;
}

#top a:link, a:visited, a:active{
	
	font-weight:bold;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	text-decoration:none;
	color:#FFFFFF;
}

#top a:hover{
	text-decoration:none;
	color:#000000;
}

#globalnav a:link, a:visited, a:active{
	
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
}

#globalnav a:hover{
	text-decoration:none;
	color:#000000;
}

 
#leftnav p, #rightnav p { 
	margin: 0 0 1em 0; 
}

#content h2 { 
	margin: 0 0 .5em 0; 
	color: #CC0000;
	}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 Column doesn't go down length of page

Hi and welcome.

The two floated elements will only expand to take as much space as they need. The commonly used technique to give multiple columns backgrounds of equal lengths is called faux-columns. You'll find a couple of articles explaining it at A List Apart.

An alternative technique (I don't have the link saved) adds a very large padding-bottom & a similarly large but negative margin-bottom. This allows you to place the backgrounds on the columns themselves.

e.g.

#rightnav
{
   overflow:hidden;
   background-color:#FF9900;
   float: right;
   padding: 1% 1% 20000px 1%;
   margin-bottom: -20000px;
}

CrazyTegger
Offline
newbie
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 3
Points: 0

3 Column doesn't go down length of page

thanks for the help. it worked great.