Content Container Div Resizing Issue

[Taxgirl]

Hey guys

I'm creating a website as a favor for my boss and I've been trying to do the speed crunch on it and already, one day in I hit a big road block... I can't seem to get the content container and background div to resize with content inside the "content" div. And also, I can't get the footer image for the content container (bottom of the color w/ rounded edges) to float to the bottom of the container.

Here is the page in question: http://srh.com/taxgirl/

There are 3 style sheets used so far (as this is a complex website and I want some parts to show on all pages and others to only show on certain pages.

Here are the CSS links:
http://www.srh.com/taxgirl/srh2008.css
http://www.srh.com/taxgirl/css/mainsrh.css
http://www.srh.com/taxgirl/css/srh_index.css

#contentcontainer {
	position: absolute;
	z-index: 3;
	width: 740px;
	left: 11px;
	top: 505px;
	right: 11px;
	height: auto;
	margin-bottom: 70px;
	overflow: visible;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: left;
}

#contentbg {
	background-image: url(../images2/required/layout/contentbg.png);
	background-repeat: repeat-y;
	background-position: center top;
	overflow: visible;
	position: relative;
	width: 760px;
	top: 55px;
	height: 900px;
	left: 1px;
	right: 0px;
	bottom: 65px;
	z-index: 2;
	margin-bottom: 63;
}
#contentcontainterfooter {
	height: 15px;
	width: 760px;
	position: relative;
	left: 1px;
	right: 0px;
	z-index:3;
}

Here is the HTML:

 <div class="contentbg" id="contentbg">    <div class="contentcontainer" id="contentcontainer">CONTENTS THAT NEEDS The Content bg to be relative to.</div></div>
<div class="contentcontainterfooter" id="contentcontainterfooter"><img src="images2/required/layout/content_bottom.png" width="760" height="15"></div>

The text I threw in the DIV is just sample text so please disregard any unlisted or unused class tags, etc. This text will be removed after the issue is solved.

If anyone could help I would be forever greatful

Please take a look and let me know if you have any advice.

Thanks you so--o much!
~beth.

ps. This is a side concern, but if anyone knows how to make a png background compatable with IE, please do tell. This isn't too big of a concern for me because if I need to I can just use a gif, but if you know, the knowledge would be welcome and thanked for

To all that read: Have a fantastic day and thank you for your time.

[dog]

Side concerns first:

... if anyone knows how to make a png background compatable with IE, please do tell.

As far as I know PNGs are not compatable versions of IE older than IE7. There is almost certainly some way to check the browser that's being used to view the page and direct to a different CSS file depending. ...but I don't know how.

Regarding the rest... let me take a closer look and I'll be right back.

Dog

[dog]

Hello again Taxgirl,

First up! The code is a little crazy. I don't know why you are giving elements classes and ids. Give ids to unique elements and classes when more than one element of that class may appear.

Anyway, I would suggest getting rid of the 'postion:absolute;' you've given to 'contentcontainer'. Elements with absolute positioning don't tend to be too useful when the layout of other elements is dependent on their variable height or width.

There may be other things but I would suggest you start there.

I also noticed, 'left: 1px; right: 0px;' in the css for the footer. This is a bit of a paradox. Like text being left and right aligned. As far as I know the browser will be going with 'right: 0;' as that's what it reads last.

Hope some of what I'm written helps,

Good luck.
Dog