close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Anchor footer to bottom of the page

Thread began 4/02/2009 12:18 pm by CraigR | Last modified 4/03/2009 12:36 pm by CraigR | 7513 views | 7 replies |

CraigRBeta Tester

Anchor footer to bottom of the page

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 ?

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

CraigRBeta Tester

Css

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

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

CraigRBeta Tester

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.

Sign in to reply to this post

CraigRBeta Tester

mockup css

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

line 122 sets the height of the content div

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

CraigRBeta Tester

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.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...