October 14, 200917 yr Hi Guys, I am working on a website for a client, and I have been having problems with pushing a content div to the bottom of the screen (yes I know, who hasn't). I have read through loads of tutorials, and forums but cannot find a problem. My problem would be easy to fix but I have a background image on the container that needs to be pushed down. If any of you guys can take a look at my code and tell me what stupid mistake I am making it would be greatly appreciated. http://blueberrytech.co.uk/bitter Many thanks, Ian.
October 14, 200917 yr I'm not sure what you want; your #content div has min-height: 300px; if you edit that to min-height: 500px; it will reach the bottom of the screen, but you have a footer below that. Do you want the footer inside #content, inside #page or left below all of them?
October 14, 200917 yr Author Hi thanks for replying. I would like my background to push to the bottom of the screen with the brown background-color directly above to produce the gradient effect. The footer also needs to be at the bottom of the page, but this is not a problem, it is simply the background.
October 14, 200917 yr If you increase the min-height of #page it will take the 440px high background-image to the bottom of my screen and fill in above with the brown background-color: #42200e; #page { min-height: 550px;/*400px;*/ background-color: #42200e; color:#ffffff; background-image:url(images/choc.gif); background-repeat:no-repeat; background-position:bottom center; } and then the footer is below that, but invisible until you scroll.
October 14, 200917 yr Author If you increase the min-height of #page it will take the 440px high background-image to the bottom of my screen and fill in above with the brown background-color: #42200e; #page { min-height: 550px;/*400px;*/ background-color: #42200e; color:#ffffff; background-image:url(images/choc.gif); background-repeat:no-repeat; background-position:bottom center; } and then the footer is below that, but invisible until you scroll. Hi, Thank you so much for helping but I haven't explained myself very well. I want to get the container #page to scale vertically down with the browser window. So if there is little content on the page and the browser is quite tall then the image will be pushed to the bottom of the browser. Like this: I hope this helps. Thank you for your patience.
October 14, 200917 yr http://ryanfait.com/sticky-footer/ Should work, you might need a few amendments mind. if you have any trouble with it just post
October 14, 200917 yr Author http://ryanfait.com/sticky-footer/ Should work, you might need a few amendments mind. if you have any trouble with it just post Hi, thanks. I will try this. I did consider it but didn't think it would solve my problem. I will have a try and let you know how things go. Thanks again, Ian
Create an account or sign in to comment