close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Footer sticking to bottom of page

Thread began 2/01/2011 3:22 pm by jhmblvd | Last modified 2/22/2011 4:14 pm by Jason Byrnes | 3460 views | 12 replies |

jhmblvd

Footer sticking to bottom of page

Hello, I'm using CSS Sculpture 3 and am using a template with a full width header and a left handed column. I'm working on a site that provides support for blind people who want to use the net. I want a full width footer that sticks to the bottom of the page and I've followed several tutorials and can't seem to find the problem. In IE (version 8) the footer climbs up the page when viewed in a smaller browser window. The site is located at www.attacs.net and currently I have no footer on the page. I want a full width header and a full width footer. I am including the page where I essentially created a div outside of the containing divs and I've applied overflow, positioning, negative margins, etc. Nothing seems to work. Any help would be greatly appreciated. This is a nonprofit work and I can't afford to submit a ticket! Thanks

Sign in to reply to this post

Jason ByrnesWebAssist

You can accomplish this directly in CSS SCulptor.

If you click the button to edit the css, on the layout tab, set the select list next to footer to Fixed.


this will set the footer to be fixed to the bottom of the page.

Sign in to reply to this post

jhmblvd

Footer does not stick to bottom

Hi, When I set the footer to fixed it disappears completely.

Sign in to reply to this post

Jason ByrnesWebAssist

do you have a link where i can see this?

the link form your initial post does not have a footer in the template.

Sign in to reply to this post

jhmblvd

Sticky footer

Hi,

I put it on my testing server

services.htm

In IE 8 the footer climbs up to the middle of the page on small windows as the user is blind this creates some issues. Your help is greatly appreciated. I've tried using negative margins on the outerWrapper div I've read "Sticky Footer" at stickyfootercss.com I am just missing something here. I just need to make sure the footer is pushed to the bottom of the content.

again thanks

Sign in to reply to this post

Jason ByrnesWebAssist

youre causing the problem by setting a 100% height on the body tag in the css/basic.css file:


html, body, #outerWrapper, #contentWrapper {
height:100%;
min-height: 100%;
position:relative;
};

body > #outerWrapper {
position:relative;
height: 100%;
}



you want the outer wrapper and content wrapper to have 100% height, but not the body tag, this is what pushes the footer up the page.

Sign in to reply to this post

jhmblvd

Sticky footer fixed

Hey, thanks much for your help. I appreciate it and it worked great.

Sign in to reply to this post

Jason ByrnesWebAssist

you're welcome.

Sign in to reply to this post

pao323504

Having the same problem

I am having the same problem with my site www.soc.mil on the contact page but the body is not set at 100%. Also, I am not seeing the top or bottom borders on my page.

Sign in to reply to this post

Jason ByrnesWebAssist

in CSSSculptor/2ColumnFixedLeftSidebarHeaderandFooter_SOCMILinsidepages_css/screen.css


change:

#outerWrapper #contentWrapper {
background-image: url("../2ColumnFixedLeftSidebarHeaderandFooter_SOCMILinsidepages_images/contentWrapper_bg.png");
background-repeat: repeat-y;
color: #3d3d3d;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 14px;
overflow: visible;
}




to:

#outerWrapper #contentWrapper {
background-image: url("../2ColumnFixedLeftSidebarHeaderandFooter_SOCMILinsidepages_images/contentWrapper_bg.png");
background-repeat: repeat-y;
color: #3d3d3d;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 14px;
overflow: hidden;
}
Sign in to reply to this post
loading

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...