Fixed Full Width Footer Problem

[tim376588]

Hi All,
Just wondering if anyone can point me in the right direction here – sorry I am a bit of a newbie. I am using CSS Sculptor to create a base page that I want to look similar to attached document. I have created the document as I basically want it (i.e. inserting classes etc. to get my layout as I want) but in doing so it appears to break the code for the fixed full width footer created by Sculptor – it looks okay in a high res monitor setup like I have but when I view it in say 1024 x 768 the blue bar at the bottom jumps about half way up the page. I have looked at this for ages and am scratching my head. Here is the URL <http://www.printnweb.com.au/main.html> if anyone wants to take a quick squizz and offer suggestions. Would appreciate the feedback.

Thanks,
Tim

[neilo]

Hiya Tim,

Try changing the code at around line 120 of your main.html page from:

<div id="fixedFullWidthFooter">

to:

<div id="fixedFullWidthFooter" class="clearit">

This applies the class from your css file to the footer div to make it clear the other content.

[neilo]

Once you've done that, you may also want to adjust the FullWidthFooter css in your screen.css. Having the top margin as -60px will cause you to lose a portion of your content area (most noticeable in IE).

Your current css for the div is:

#fixedFullWidthFooter {
position: relative;
margin: -60px 0 0 0;
}

You could sort it by changing it to:

#fixedFullWidthFooter {
position: relative;
margin: 0px;
}


or whatever margins you want.

[tim376588]

Thanks Neilo for your reply. I applied the clearit class as you suggested and it works fine – thank you. I had tried clearing it before but I was applying it as a separate class which was giving mixed results.
Regarding the -60px to bring the div back up the page, is there a workaround that you know of that can avoid this? I have reduced the size of the #fixedFullWidthFooter to 30px leaving the -30px top margin but I was thinking of just allowing say, 40px of white space at the bottom of every page so that at least text wouldn't be covered up in IE (is this a bit too amateurish).

Thanks for your help.
Tim

[neilo]

Cheers Tim,

It depends what you want the final effect to be (of course!). The template css sets the outerWrapper to have a minimum height of 100% - this is to force the footer div (which is outside of the outerwrapper) to the bottom of the screen - whatever resolution monitor is used to view it. It also has the unfortunate effect of forcing a vertical scroll bar - regardless of window size.This means that on a high-resolution screen that there is likely to be white space between the bottom of the content and the top of the footer (depending on how much content there is), and on a smaller resolution screen or on a non-maximised window there will be little or no white space.

Having a minus 30px top margin on the footer div does mean that there will be some text covered up when viewing the page on a small res screen or on a small window in IE, and because of the min-height property mentioned above, will go no real way to reducing the white space. My opinion is that that is not such a good idea. I would give the footer a top margin of 0px as it will make no great difference to the white space issue, but will be aesthetically slightly better (only my opinion) in that it will stop the footer running over the text. I would also reduce the min-height of the outerWrapper div to around 92% to allow for content + footer without forcing a vertical scrollbar even on a maximised window. That would be my recommendation, for what it's worth.

The white space issue could be solved by puting the footer div inside the outerWrapper div, but then it would not be full width of the screen and would look a bit odd in the context of the overall design. There are also modifications that could be made to the background image to create a pseudo footer - but only if the page content was not going to change.

Anyway, practically any design requirement can be realised with css, so if there's anything I or the people can help with, then post back here.

[tim376588]

Gday Neilo,
Yes, I was having a bit muck around with the divs and margins and pretty well have what I want now – now just to write the content! Thanks again.

Regards,
Tim