Columns Not Extending

[AycheKay]

I know this is a very popular problem and is covered many places on the Internet but I haven't found a clean and clear resolution to it. I have an existing fixed-width template that I've manually coded using floats and the center column doesn't extend far enough on some pages unless I add text or line breaks to make it extend far enough, which I'm unwilling to do. I prefer to leave my template fixed width and using floats unless I there is no clean fix for this.

You can view the site here:
http://66.147.240.99/~aquater1/index.php/faqs/why-shouldnt-i-just-drill-deeper/

And here's my CSS:

body {
	background-color:#E5E5E5;
	margin:0px;
}

#wrapper1 {
	/* color: #E6E6E6; */
	color: black;
	margin: 10px auto 0px auto;
	width: 960px;
	position: relative;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: small;
}
/* -------------------------------------------------------- */


#wrapper2 {
	/* background-color: #0C0237; */
	width: 940px;
	border: 4px solid #151515;
	/* background-color: #581E1D; */
	background-color: #368798;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-opera-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius: 5px;
	box-shadow: 8px 8px 8px #555555;
	-moz-box-shadow: 8px 8px 8px #555555;
}


#header{
	background-image:url(http://66.147.240.99/~aquater1/themes/blue_bubbles_hk/images/header.jpg);
	height: 200px;
	/* display: inline; */
	border-bottom: 4px solid #151515;
	color: #E6E6E6;
}

#headertext {
	padding: 10px;
	width: 680px;
	height: 130px;
	float: left;
	text-align: center;
	overflow: hidden;
}



/* Div to hold menu buttons. */
#navtop {
	padding: 12px 10px 0px 10px;
	float: left;
	height: 34px;
	width: 680px;
	overflow: hidden;
	
}
/* ---------------------------------------------------- */

#navtop a {
	text-decoration: none;
}

#navtop ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

#navtop li {
	display: inline;
	margin: 0;
	padding: 8px ;
	border-right: 2px white solid;
	font-weight: bold;
	font-size: small;
}

#navtop li a:hover {
	border-bottom: 2px white solid;
	cursor: hand;
}


#centercolumn {
	padding: 12px 18px;
	float: left;
	width: 480px;
	display: inline;
	background-color: #E4D9B6;
}


#leftcolumn {
	float: left; 
	width: 210px;
	display:inline;	
	color: white;
}

#leftcolumn ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#leftcolumn li a {
	text-decoration: none;
	display: block;
	background-color: #373737;
	width: 204px;
	height: 30px;
	padding-top: 8px;
	padding-left: 6px;
}

#leftcolumn li {
	border-bottom: 2px black solid;
	font-weight: bold;
	font-size: small;
}


#leftcolumn li a:hover {
	border-bottom: 2px white solid;
	cursor: hand;
}


#rightcolumn {
	float: right;
	padding: 12px;
	width: 190px;
	display: inline;
	text-align: right;
	color: white;
}

#rightcolumn img {
	background-color: black;
	opacity: 0.3; /* Safari, Opera */
	-moz-opacity:0.30; /* FireFox */
	filter: alpha(opacity=30); /* IE */
}

#rightcolumn img:hover {
	opacity: 1; /* Safari, Opera */
	-moz-opacity: 1; /* FireFox */
	filter: alpha(opacity=100); /* IE */
}


#columnheader {
	padding: 1px;
	text-align: center;
	background-color: #232323;
}

#footer {
	padding: 12px;
	clear: both;
	text-align: center;
	border-top: 4px solid #151515;
	font-weight: bold;
	font-size: small;
	background-color: #0C0237;
	color: #E6E6E6;

}

[Elbudster]

I've seen this done a few ways...

1. You could add this style to your #centercolumn declartion, which would be some height that you know will at least extend past the side columns, so it appears that the center column always extends past them.

min-height: 400px;

2. You could create a 1px high background image and add it to your #wrapper2 declaration. The image would repeat-y and look like the attached image. Looking at it should be pretty apparent as to how it would work.

Hope this helps.

[AycheKay]

Thanks for the suggestions. Min-Height is not a good option since I expect the FAQ page to get much much longer than the rest.

And in reply to your suggestion about using a 1px image in #wrapper2, I think I'm already using a background color in #wrapper2 that gives my side columns their color and allows them to stretch consistently as they do. I just got to figure out how to make the middle column behave the same now.

[Elbudster]

Min-height only tells the browser to make that element at least that height -- it can still be taller if there is enough content to extend it further.

You are using a background color in your #wrapper2, but it can still be included with an image such as:

background: #368798 url(bg_tile.jpg) repeat-y;

[AycheKay]

Min-height only tells the browser to make that element at least that height -- it can still be taller if there is enough content to extend it further.

You are using a background color in your #wrapper2, but it can still be included with an image such as:

background: #368798 url(bg_tile.jpg) repeat-y;

Soooo..... If the background color sets the color for my side columns how is the background image going to affect my center column without causing any change of color on my side columns???

[AycheKay]

And a comment again on min-height. On the link I posted above, my side column on the left is eventually going to be filled with some twenty or so buttons. In order to make it work my min-height setting will need to be enough to make the center column extend downwards far enough to match the length of the row of buttons in the left column. This might be 1000 or 1400 pixels. All other pages will then have a 1400px length with lots of blank space.

I guess I don't think either of your suggestions are going to work.

[Elbudster]

See this example:

http://webpages.charter.net/tropico/demo/columns.html

Is that what you're looking for? I used all your styles (I trimmed out irrelevant ones for this example) and added one of my own to the #wrapper2

[AycheKay]

OK, it looks great but can you add a lot of content to any one single column and not have the other columns lose their color? I'm noticing a height property in the left column that sort of scares me. Not sure what that's for.

[Elbudster]

I forgot I added that height declaration for the left column, you can ignore that. I just used that temporarily to give that DIV height before I added in some random content to it. The image is tiled vertically, so it should scale fine with more content added -- might want to test it out further though with some dummy data though.

[AycheKay]

Sorry about my incessant skepticism. It looks like I got it working using your solution but I don't quite understand why it works. :) That's a little scary to me. Why does the background-color property take apply to the side columns while the tiled image file is ultimately the background? Or is that not how it works?

[Elbudster]

When a background color is supplied, along with a background image, the background color fills up any space that is not filled up by the background image. In this case, the background image is a 1px strip of that goldish color that is positioned at x:210px, which places it just past the left column. That strip then tiles vertically to give the illusion that the center column actually extends the height of the parent container. The color definition then fills any remaining space not filled by the strip, which is to the left and right, giving the background color of the side columns. Does that make sense?

If you take a look at it within a DOM inspector (Firebug ftw!) and disable/enable styles locally you can get a better idea how it works.

[AycheKay]

Does that make sense?

Yes, that makes sense. Thanks.

I hadn't figured out in my mind yet two of the things that you answered, first that the Background Image takes precedence over the background color and secondly what that 210px property was doing. Makes sense to me now.

Thanks again for your help.

[Elbudster]

Glad it helped :)