PDA

View Full Version : div background and footer div problem



blythy
Aug 12th, 2009, 04:19 PM
Hi

Sorry if this is solved elsewhere but I am having an issue. Currently I have layout that has a container, that holds a logo, middle div (that holds two columns of content) and a footer.



<div class="container">
<div class="logo"></div>
<div class="middle">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>


I have the footer fixed to the bottom of the window, but when the content spans further down the screen the footer doesn't follow - it gets stuck in the middle of the content.


.footer{
clear: both;
position: absolute;
bottom: 0px;
width: 926px;
text-align: center;
float: left;
margin-bottom: 15px;
margin-top: 10px;
font-size: 12px;
height: auto;
}


The same happens with the image I am using for the background of the middle div. That is supposed to feature at the bottom of the page (not the window).


.container{
width: 927px;
margin-left: auto;
margin-right: auto;
height: 100%;
background-image: url('../images/imgbg.jpg');
background-repeat: no-repeat;
background-position:bottom;
}

Can anyone offer any advice please, it would be greatly appreciated!

Nothingkool
Aug 12th, 2009, 04:41 PM
Well, the footer is most likely following the scroll due to the position: absolute; along with the bottom: 0px;

I'm not sure if this will work correctly but maybe you can try to replace these with margin-bottom: 0px; If not than you probably just have to clear: both with no absolute positioning and not have the footer at the bottom of the page but right under the container, which shouldn't be a problem if you have plenty of content on your pages.

And for the image problem, you have to be more specific. You can try adding background-attachment: fixed; to the CSS or maybe you could PM me a link to the page your having problems with and then I can help you further.