Footer Div overlapping Content Div
 

I've got a problem with my footer and can't figure out how to fix. The footer does two different things.

1. On pages where info is relatively medium amount, footer leaves gap.

2. On pages where info is relatively medium amount, footer overlaps left-bar.

3. On pages where info is relatively large, footer overlaps bottom area of content (covering up info at bottom of STATIC page).

I have a repeating background (1000px x 1px) in content.
I have a fixed image for the footer.

Click on any page to see problem.
Link to page: http://67.20.92.91/store/home.php

Code from AltSkin.css


#page-container {
margin: 0px auto;
width: 1000px;
}

#content-container {
padding-bottom: 0px;
margin-top: 153px;
}

#content-container2 {
padding-bottom:0px;
margin-bottom:0px;
}

#left-bar {
width: 170px;
margin: 120px 0px 0px 80px;
}

#center-main {
padding: 0px 80px 0px 80px;
margin:0px 0px 0px 200px;
}

#center {
background:url(images/fashion_mosaic/bg-repeat-center.png) repeat-y top center;
}

#center-main h1 {
color:#eb9b11;
}

#header {
border-top: 0px solid #516e99;
top: 0px;
height:223px;
width:1000px;
margin-left:auto;
margin-right:auto;
background:url(images/fashion_mosaic/bg.jpg) no-repeat top center;
}

#footer {
background-color:#291f16;
width:1000px;
height: 154px;
background:url(images/fashion_mosaic/bg-footer.jpg) no-repeat center;
}

Re: Footer Div overlapping Content Div
 

#content-container {
padding-bottom: 0px;
margin-top: 153px;
}
make bottom padding equal to height of the footer...

Re: Footer Div overlapping Content Div
 

Thanks Ashley, but I tried this and it did not work for the pages where there is very little content. I am working on a 21" monitor and when I maximize the browser window, the footer is locked at the bottom as it should be, but then there is large gap between between footer and content-container.

Do I need to define some container heights as 100% ?

Here are some links to pages with a 'gap' in the background.
http://67.20.92.91/store/cart.php
http://67.20.92.91/store/cart.php?mode=checkout

Thank you for your time.

Re: Footer Div overlapping Content Div
 

the footer has absolute positioning so I will be at the bottom.

Re: Footer Div overlapping Content Div
 

yes, make content container 100%, try it. Not sure tho.

Re: Footer Div overlapping Content Div
 

Thanks again Ashley, but that didn't work either.

I tried moving the background callout to the content-container2. That seems to work BUT, now I can't get it centered.

Check out results here, you will see background now extends all the way to footer on every page, without overlap, but it's stuck on the left side.
http://67.20.92.91/store/Custom_Features.html

#content-container2 {
background:url(images/fashion_mosaic/bg-repeat-center.png) repeat-y top center;
margin-left:auto;
margin-right:auto;
}



Any ideas on the centering?

Re: Footer Div overlapping Content Div
 

put it back to the container and I'll take a look

Re: Footer Div overlapping Content Div
 

Ok, I moved it back to where I had it originally:

http://67.20.92.91/store/cart.php

#center {
/* .menu-dialog .content a:link, .menu-dialog .content a:visited, .menu-dialog .content a:link { */
background:url(images/fashion_mosaic/bg-repeat-center.png) repeat-y top center;
}


Still trying to try some things too, but so far, nothing has worked.

Re: Footer Div overlapping Content Div
 

put this on content-container not content-container2

background:url(images/fashion_mosaic/bg-repeat-center.png) repeat-y top center;

take it off center

Re: Footer Div overlapping Content Div
 

Thanks!!! That worked! I really appreciate your help on this and taking the time! All this time I've been putting it in the wrong container! So here is what worked, in case someone else needs help in the future:


#page-container {
margin: 0px auto;
width: 1000px;
}
#content-container {
padding-bottom: 152px;
margin-top: 153px;
height:100%;
background:url(images/fashion_mosaic/bg-repeat-center.png) repeat-y top center;
}
#content-container2 {
}

#left-bar {
width: 170px;
margin: 120px 0px 0px 80px;
}
#center-main {
padding: 0px 80px 0px 80px;
margin:0px 0px 0px 200px;
}
#center {
/* .menu-dialog .content a:link, .menu-dialog .content a:visited, .menu-dialog .content a:link { */
}

#center-main h1 {
color:#eb9b11;
}

#header {
border-top: 0px solid #516e99;
top: 0px;
height:223px;
width:1000px;
margin-left:auto;
margin-right:auto;
background:url(images/fashion_mosaic/bg.jpg) no-repeat top center;
}
#footer {
background-color:#291f16;
width:1000px;
height: 154px;
background:url(images/fashion_mosaic/bg-footer.jpg) no-repeat center;
}
#header .line1 {
margin: 0px;
padding: 0px;
height: 170px;
}
#header .line1 .logo {
position: absolute;
left: 0px;
top: 31px;
height: 50px;
width: 228px;
}

Re: Footer Div overlapping Content Div
 

No prob... my pleasure.

Re: Footer Div overlapping Content Div
 

Whoops.

In IE8, the background in the shifted to the right for some reason. Any ideas? I tried several things but nothing worked. Do I need to edit one of the separate IE.css files to make this work?

From altskin.css

#page-container {
margin: 0px auto;
width: 1000px;
}
#content-container {
padding-bottom: 152px;
margin-top: 153px;
height:100%;
background:url(images/fashion_mosaic/bg-repeat-center.png) repeat-y top center;
}

#left-bar {
width: 170px;
margin: 120px 0px 0px 80px;
}
#center-main {
padding: 0px 80px 0px 80px;
margin:0px 0px 0px 200px;
}

#center-main h1 {
color:#eb9b11;
}

#header {
border-top: 0px solid #516e99;
top: 0px;
height:223px;
width:1000px;
margin-left:auto;
margin-right:auto;
background:url(images/fashion_mosaic/bg.jpg) no-repeat top center;
}
#footer {
background-color:#291f16;
width:1000px;
height: 154px;
background:url(images/fashion_mosaic/bg-footer.jpg) no-repeat center;
}
#header .line1 {
margin: 0px;
padding: 0px;
height: 170px;
}
#header .line1 .logo {
position: absolute;
left: 0px;
top: 31px;
height: 50px;
width: 228px;
}

Re: Footer Div overlapping Content Div
 

try restoring this to it's original form.

#content-container2 {
}

believe it should be

#content-container2 {
float: left;
position: relative;
right: 100%;
width: 200%;
}

Re: Footer Div overlapping Content Div
 

I tried restoring that, but it didn't work. FF still looks fine. IE8 still looks messed up. Any other ideas on this one? I am stumped on this.

I also checked to make sure the IE7.css files are all looking original and they are.

Re: Footer Div overlapping Content Div
 

Without looking at it, I think it has something to do with your css >
#center-main {
padding: 0px 80px 0px 80px;
margin:0px 0px 0px 200px;
}

You have margin left 200px, it could be this that is breaking it, the only way to eliminate and find out what is causing issues, as I do is remove certain css, save > View and see what happens each time in IE8 this is hard to deal with, without anyone physically trying various edits with your css code.

That's the way I would deal with it.
I gather this is a 4.3 install?

Sorry Cannot be of more help.

Re: Footer Div overlapping Content Div
 

The IE developer toolbar can be an easier way to narrow in on the issue.

For your content-container, try setting the BACKGROUND-POSITION-X: left instead of center.

Re: Footer Div overlapping Content Div
 

You're a genius GB2! Thank you! It worked perfectly. Not sure why I overlooked that and had tried a lot of different things, including changing the 200px value that gizmo mentioned.

I got IE web developer toolbar too, which definitely helps but the CSS in this cart system is so crazy big, sometimes it's difficult to follow everything.

Thanks again for the help guys!