Link to home
Start Free TrialLog in
Avatar of svetoslavm
svetoslavmFlag for Canada

asked on

CSS: footer too long

I have to tweak this design. I had to make some elements relative and move them to be over the background.

Here is the website. I am using frames to protect the privacy of the client.
http://bcache.com/tmp/long-footer/

Problem: the footer has some white space. do you know how to remove it?
Avatar of Ess Kay
Ess Kay
Flag of United States of America image

you can set the size of the footer and cut off anything that surpasses the size
just set max width and height
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of svetoslavm

ASKER

Thank you julian & Demented_Goose for the detailed feedback.

#footer_bg_strip has to be outside of the footer because it has to go horizontally across the whole page. #footer has some width and is centered.
@svetsolavm - that is why I suggested in my post you make it the full width and then use the margin: 0 auto of the footer element to make sure it is positioned properly. The  way you have done it is a hack.

Here are some files that demonstrate how to do it the right way . you might need to edit the image refs in the main.css

Here I have removed the footer_bg_strip and put a container around the footer - I used the style from footer_bg_style for the container with a few mods.

The footer-middle and right I positioned absolutely to avoid the doc making provision for them.

HTH

ps. the files were from a browser save so the path to css files and images were changed to relative paths. The only code that changed though is all in <div id="footer-container"> copy that out and remove <div id="footer_bg_strip"> - that's all you need from a.htm.
a.htm
main.css