Having a problem with 100% Height Div

[thenext88]

Edit: Sorry I posted this in the wrong forum, had multiple tabs open and got mixed up. Will see if I can get it moved asap.

FIXED!

I have tried so many ways to have something that works, but my content always overflows my div container (shrink the web page vertically to see what I mean), and I have no idea why.

My CSS code is below... It's done a bit weird because this was initially a different project that was changed.

#body = the entire container wrapper
#body2 = the entire container wrapper with a different border color

Inside of the body is #topad, #contentbox, and #playlistbox. Content box is the one that will expand, and I want it to cause #body and #body2 to expand accordingly as well.

The only thing that has worked is setting a fixed height, but I would prefer to have an expandable container, so if anyone can help, let me know. Thanks.

@charset "utf-8";
/* CSS Document */
/* TLBR */
*{border:0px; margin:0px; padding:0px;
font-family:arial,sans-serif;
font-size:11px;
color:white;}

html {
	height:100%;
}
body {
	background-color:#666666;
	height:100%;
	background-image:url('images/bgpattern.gif'); background-repeat:repeat;
}


p {text-indent:20px; text-align:justify;}
a:link {color:white;}
a:visited {color:white;}

#body {display:block; position:relative; width:800px; min-height:100%; height:100%; margin:auto;
	border-left:6px solid #640000; border-right:6px solid #640000; background-color:black;}

#body2 {display:block; position:relative; width:796px; border-left:2px solid #dddddd; border-right:2px solid #dddddd;
 	height:100%;}

#topspan {display:block; width:100%; height:150px; background-image:url('images/topgrad.png');
	background-repeat:repeat-x; border-bottom:8px solid #640000;}

#banner {display:block; position:relative; width:800px; height:158px; margin:auto;
	background-image:url('images/banner.png');}
	#search {display:block; position:relative; top:100px; left:-5px;}
	input.search {font-size:14px; border:5px solid #640000; text-align:center;}
	input.searchbutton {display:block; position:relative; height:21px; width:21px; border:none; white-space:nowrap;
		left:175px; bottom:23px;}

#intro {border-bottom:1px solid white; padding-bottom:10px; padding-top:10px; background-color:#222222;}

#closer {display:block; position:relative; width:812px; height:65px; margin:auto;
	background-image:url('images/closer.png');}
	#closerlinks {display:block; width:800px; position:relative; top:30px;}
	
/* Body */

#topad {display:block; position:relative; width:728px; height:90px; margin:auto;
	top:20px;}
        #counter {position:relative; text-align:center;}
	
#contentbox {display:block; position:absolute; width:455px;
	top:150px; left:35px;}		
	#cb1 {display:block; width:455px; height:29px; background-image:url('images/cb1.gif'); text-align:center; line-height:29px; vertical-align:middle; 
		border-bottom:1px solid black; font-size:18px; font-weight:bold; color:#F7F7F7;}
	#cb3 {display:block; position:relative; top:-2px; padding:2px;}

#playlistbox {display:block; position:absolute; width:236px; height:452px;
	top:150px; right:35px;}
	#pb1 {display:block; height:29px; background-image:url('images/pb1.gif');}
	#pb3 {display:block; height:500px;}
		#linkad {display:block; width:200px; height:90px; position:relative; margin:auto; top:20px;}
		div.rightheader {display:block; width:200px; height:15px; background-color:#640000; margin:auto;
			color:white; font-size:12px; text-decoration:underline; font-family:Arial, Helvetica, sans-serif; font-weight:bold;
			text-indent:1px; position:relative; top:20px;}
		div.rightlinks {display:block; width:200px; margin:auto;
			position:relative; top:20px; padding-left:10px;}

 

[gaucho1976]

you have quite a bunch of errors and a lot of useless code. I didn't clean everything, but I think this will work:

@charset "utf-8";
/* CSS Document */
/* TLBR */
*{border:0px; margin:0px; padding:0px;
font-family:arial,sans-serif;
font-size:11px;
color:white;}

html {
	height:100%;
}
body {
	background-color:#666666;
	height:100%;
	background-image:url('images/bgpattern.gif'); background-repeat:repeat;
}


p {text-indent:20px; text-align:justify;}
a:link {color:white;}
a:visited {color:white;}

#body {display:block; position:relative; width:800px; margin:auto auto;
	border-left:6px solid #640000; border-right:6px solid #640000; background-color:black;}

#contentbox {width:455px;}		
	#cb1 {width:455px; height:29px; background-image:url('images/cb1.gif'); text-align:center; line-height:29px; vertical-align:middle; 
		border-bottom:1px solid black; font-size:18px; font-weight:bold; color:#F7F7F7;}
	#cb3 {top:-2px; padding:2px;}

#bodywrapper {width:796px; border-left:2px solid #dddddd; border-right:2px solid #dddddd;}

#topspan {display:block; width:100%; height:150px; background-image:url('images/topgrad.png');
	background-repeat:repeat-x; border-bottom:8px solid #640000;}
	
#counter {position:relative; text-align:center;}

#banner {display:block; position:relative; width:800px; height:158px; margin:auto;
	background-image:url('images/banner.png');}
	#search {display:block; position:relative; top:100px; left:-5px;}
	input.search {font-size:14px; border:5px solid #640000; text-align:center;}
	input.searchbutton {display:block; position:relative; height:21px; width:21px; border:none; white-space:nowrap;
		left:175px; bottom:23px;}

#intro {border-bottom:1px solid white; padding-bottom:10px; padding-top:10px; background-color:#222222;}

#closer {display:block; position:relative; width:812px; height:65px; margin:auto;
	background-image:url('images/closer.png');}
	#closerlinks {display:block; width:800px; position:relative; top:30px;}
	
/* Body */

#topbanner {display:block; position:relative; width:728px; height:90px; margin:auto;
	top:20px;}
	


#playlistbox {display:block; position:absolute; width:236px; height:452px;
	top:150px; right:35px;}
	#pb1 {display:block; height:29px; background-image:url('images/pb1.gif');}
	#pb3 {display:block; height:500px;}
		#linkad {display:block; width:200px; height:90px; position:relative; margin:auto; top:20px;}
		div.rightheader {display:block; width:200px; height:15px; background-color:#640000; margin:auto;
			color:white; font-size:12px; text-decoration:underline; font-family:Arial, Helvetica, sans-serif; font-weight:bold;
			text-indent:1px; position:relative; top:20px;}
		div.rightlinks {display:block; width:200px; margin:auto;
			position:relative; top:20px; padding-left:10px;}

#updatewrapper {padding-top:20px;}
	#updates {display:block; text-align:right; height:30px; font-weight:bold; text-decoration:underline; font-size:16px;}
	#u1 {display:block;}
	#u2 {text-align:right;}

#songclips {overflow-y:auto;}

/* Tables */
table.databases {display:block; width:350px; margin:auto;}
table.databases th {background-color:#640000; width:175px; font-size:12px; text-decoration:underline; height:15px; color:white;}
table.databases td {text-align:center; width:175px; border:1px solid black; cursor:pointer;}

table.songclips {display:block; width:430px; margin:auto;}
table.songclips th {width:87px; background-color:#640000; font-size:12px; text-decoration:underline; height:15px; color:white;}
table.songclips td.s1 {text-align:center; width:158px; border:1px solid black;}
table.songclips td.s2 {text-align:center; width:157px; border:1px solid black;}
table.songclips td.s3 {text-align:center; width:30px; border:1px solid black;}
table.songclips td.s4 {text-align:center; width:30px; border:1px solid black;}
table.songclips td.s5 {text-align:center; width:50px; border:1px solid black;}

/* Images */

img.enterdb {display:block; width:140px; margin:auto; white-space:nowrap; position:relative;
	top:50px;}
img.dl {display:block; width:20px; margin:auto; height:20px; white-space:nowrap; padding:2px;}

I've noticed you're in love with this: "display:block; position:relative;". I'm not sure you need a single one of those (didn't test them all) but most of the times you used it is useless and one of the times it caused the problem you have. Dunno why you used it, but next time simply avoid it.

Plus, you are calling 3 style sheets that doesn't exist. It causes no harm, but take them out if you want the page to validate, just check you page with a CSS validator to find out the errors in your page so you can correct them, here's the URL

http://jigsaw.w3.org/css-validator/

 

[thenext88]

Hey, thank you so much. Rep given.

The reason I have so many positions:abs/rel is because ever since I started playing around with them, I have found it easier for FF and IE to display identically. There was a time when I have a lot of trouble lining things up in FF/IE so that they looked identical.

I'm so used to have display:block drilled into my head from <span> (so they didn't overlap) that I have kept using it since.

My relative/absolute positioning is not perfect, hence the useless placements. I also have it placed in CSS that I removed attributes like top/bottom and etc from. I did not clean up the code before posting it. I had no idea that this could or was actually causing the problem. So for now I am just using padding to place the entire content div where I want it.

For now, the fix of removing the position:absolute from content box works.