Anchor footer to bottom of the page

[CraigR]

On my site, i set up my css so that the content div was fixed at 650px, which together with my header & topnav divs set my footer nicely at the bottom of the page, even on pages with little content.

however, on my ecart checkout & confirmation pages, the page needs to be taller than this to accomodate all of the info.

how can i set it so my footer is always at least x pixels from the top of the page ?

[Ray Borduin]

CSS Sculptor can help you to create a page with a floating footer attached to the bottom of the page... or you can find a way to add your div inline instead of positioning it absolutely as you mention.

[CraigR]

Hi Ray, sorry, but I maybe didn't explain properly, (or I just don't get your solution).
My CSS was originally created with CSS sculptor.

My footer was floated underneath the main content, so where there was only a little bit of content the footer would appear half way up the page.

i then set my #content height to 650px (from auto ?) so that my floated footer appeared at the bottom of my screen, but with this fixed length, the checkout and confirm pages overrun.

all of my other pages are contained nicely with a fixed content height.

what i really want is the #content div to be AT LEAST 650px

Hope this makes sense

[Ray Borduin]

If you gave a sample page I could test some of my suggestions.

You may be able to use the css attribute min-height instead of height.. the only issue is it won't work with ie6.

You could go back to auto height, and add a 1px wide transparent .gif 650px tall to space it down.

[CraigR]

i tried adding a gif 650px high as the background image of my content div, but the div doesn't expand to incorporate all of the graphic.

the only way i can get my content div to 650px is to set its height

what I'll try and do is import the relevant css into a dummy page and post it here.

[CraigR]

i have zipped up an html as a mockup with imported css settings

line 122 sets the height of the content div

[Ray Borduin]

You couldn't set the 650px gif as the background... that won't work.

You need to actually place it inside the content floated left or right. Only if the image tag <img> with that image is in the div container would it space it properly.

[CraigR]

thanks Ray.

i'll try that and i'll let you know if it works

do you think that is the best option I have ?

(The supreme option would be to sit the footer at the bottom of the screen, or the bottom of the page, whichever is longer, but if the transparent gif (or other option) works as you suggested, that'll be great.

UPDATE

The transparent gif, floated left, set within the content div seems to work. Thanks for your help.