Content Container Div Resize Issue

Issue with allowing content to fill container div with background image.

[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.

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.

#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.

[edited by: SuzyUK at 4:51 am (utc) on Oct. 29, 2007]
[edit reason] No personal uris, thanks [/edit]

[CodilX]

Hi,

I dunno if this will solve your problem, but I had a similar issue with the height of my content div and problems with expansion.

This is more of a min-height fix thing, but this worked for me, maybe it'll work for you

#main 
{
 width: 742px;
 height: 829px;
 min-height: 829px;
 height: auto;
 background: url('images/mainshaddow.jpg') repeat;
 left: 50%;
 margin-left: -380px;
 position: absolute;
}

the png issue: well I just use gifs :) way too much time involved making png working, but here are a few links to fix it

[edited by: SuzyUK at 4:52 am (utc) on Oct. 29, 2007]
[edit reason] No personal uris, thanks [/edit]

[CodilX]

sry: it seemed liked it worked for me, but it didn't :/ having the same problem here

[appi2]

You can't resize background images in CSS at the moment. I think it's being introduced in CSS3.

You can repeat the background images by using either of these.

background: url('images/mainshaddow.jpg') repeat;
background: url('images/mainshaddow.jpg') repeat-x;
background: url('images/mainshaddow.jpg') repeat-y;

ps WebmasterWorld does not allow you to post links to your site.

[CodilX]

I've solved this problem on my page.

Instead of using the background element inside the container, I created a separate div with only the background, position absolute and 100% height. works like a charm :)

[taxgirl]

I believe that's what my contentbg div was for? To set the background? Then I put the content div inside to determine the size?

And I wasn't actually asking to resize the image. I made it the smallest I could. I wanted it to repeat-y only and fill as the content fills the page and if the content expands, I want the background and the bottom of the page to move with it.

And I'm very very sorry I didn't know you couldn't post links. I wasn't trying to sell anything and none of the links on the page work so it's not leading you anywhere... most forums I've ever posted at ask for the URL. I apologize.

Thanks again for your eyes and thoughts :)
~beth.