Footer Not Staying When Minimizing Screen

What does my footer move around when I minimize the screen smaller then the 934px;

I have the footer outside of the wrapper, which is what I need but cant seem to figure out why it doesnt stay still

http://www.david-mitchell.ca/election

Thanks,

Mike

Thanks Rayzur, the only thing is I need the width of wrapper-main to be 1255px. I know it forces a horizontal scrollbar and I don’t agree with it but that how the person who designed it would like.

Unfortunately that blue bg colour on the wrapper-main div he wants there I tried to talk him out of it but he didn’t understand how it forces a horizontal sidebar.
Tell him to view it on a 15"-17" laptop or monitor and then he will understand. A horizontal scrollbar right off the bat it one of the most irritating things you can give your visitors when it is not necessary. The thing is that not everyone keeps their resolution set at 1280, I am an 1152 user myself so that’s why I get the scrollbar. For what though, a page that has it’s content width under 950px.

Glad you understand it though :slight_smile:

So to accomplish the footer staying where it is would I just change the min-width in the code you showed to the 1255px?.
If you can’t get the message through to him, then yes the footer min-width would be the same as the outer wrapper width.

Thanks Rayzur, the only thing is I need the width of wrapper-main to be 1255px. I know it forces a horizontal scrollbar and I don’t agree with it but that how the person who designed it would like.

Unfortunately that blue bg colour on the wrapper-main div he wants there I tried to talk him out of it but who didn’t understand how it forces a horizontal sidebar.

So to accomplish the footer staying where it is would I just change the min-width in the code you showed to the 1255px?.

Hi,

The footer just needs a min-width that is equal to your #wrapper-main or #wrapper div. The footer defaults to 100% width and that is the available width of the viewport at any given instance, that does not include any space beyond the viewport. When you scroll the page left the footer does not recalculate it’s width.

I would suggest that you remove that 1255px width from #wrapper-main, it is forcing a horizontal scrollbar on smaller monitors/resolutions. There is no reason for it when your main content is 934px.

If you want a little extra space on the sides then set a min-width on #wrapper-main that is slightly larger than #wrapper’s width.


[B]#wrapper-main[/B]  {
min-height:100%;
[COLOR=Blue]min-width:964px;[/COLOR] /*slightly larger than #wrapper for space on lt & rt*/
margin:0 auto;
background:url("images/wrapper-main.jpg") repeat-x scroll 0 0 #E5ECF1;
[COLOR=Red]/*width:1255px*/[/COLOR]
}
[B]* html #wrapper-main[/B] {height:100%} /*IE6 min-height/haslayout*/
[B]
#footer[/B] {
height:342px;
[COLOR=Blue]min-width:964px; [/COLOR]/*same as #wrapper-main or #wrapper (whichever is largest)*/
background:url("images/footer.jpg") repeat-x scroll 0 0 transparent;
}

If you don’t want any space on the sides then dont’ set any min-width on #wrapper-main and set footer min-width same as #wrapper