CSS Making footer stick to bottom

How do I make the footer stick to the bottom?
http://www.curiousmedia.com.au/test/default.php
thanks
Here is the css
margin: 0;
html, body {height: 100%; padding:0; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:11px; line-height:18px;}
h1 {font-family:Tahoma, Geneva, sans-serif; font-size:18px; color:#1d518b;}
#superwrapper{
background-image:url(images/top_bg.gif);
background-repeat: repeat-x;
#wrapper {width:765px; min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -125px; /* the bottom margin is the negative value of the footer's height */}
#header{padding-top:25px; }
#logo {float:left;}
#social_media {float:right; padding-top:30px; }
#social_media img{padding-left:8px;}
#content{padding:25px 0 0 35px;}
#col-1{width:452px; float:left;}
#col-2{float:right; width:213px;}
.clr{clear:both;}
#footer-content{width:765px; padding:75px 0 35px 0; margin: 0 auto}
.push{height:1px /* .push must be the same height as .footer */}
.footer{
height: 126px; /* .push must be the same height as .footer */
background-image: url(images/footer_bg.jpg);
background-repeat:y;

Hi,
thanks to Nancy O. you should look here:
www.alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
Hans-G.

Similar Messages

Apparent gap below CSS sticky footer in IE?

I've been testing CSS "sticky footer" solutions I found on the Web. The one I picked works in the four browsers I checked with (Firefox, Chrome, Opera and IE) but there's one possible glitch. In IE 8. I'm seeing what appears to be a small gap between the footer and the bottom of the browser window. My Color Cop utility says neither of the two colors in that gap match anything specified in the CSS. I've included a screen capture, and a link if you have IE installed. I'd like to know if this is a problem with IE (who woulda thunk?) or something inherent in the look of IE's browser window?
http://dreamweaverresources.com/tutorials/sticky-footer/

I assume "browser chrome" means the imagery used to create the "pieces" of the browser's appearance outside the browser window contents.
Yes.
http://www.expression-web-tips.com/what-is-browser-chrome/
But, if by scrollbar you mean the sliding blue rectangle on white background with a directional arrow on either end, I don't see that anywhere -- side or bottom -- when I view that link in IE 8?
You'll see it if you shrink the height of your browser below a certain dimension.
I saw it on my widescreen monitor.

I need the rubber foot at the bottom of my Macbook. It's impossible to find.

I lost the rubber foot at the bottom of my Macbook. This has been an adventure in trying to get this. I wanted to purchase it online. Not available!! So I chat with Apple, the guy tries really hard to get it for me. Hi finds it in his system but CANNOT mail to me. Not allowed! I go to Apple store, they say I have to make an appointment with the Genius bar. I try to do that online, it won't let me, because it wants to solve through apple support or chat.
Are they kidding? A rubber foot? I am really frustrated!! Can some one help?

Neil,
I was at the Genius Bar for another problem and mentioned the feet falling off the bottom of my MBP. The Genius's answer was that the important thing was to keep dirt from getting inside the case, so I should just take off the bottom cover and put electrical tape over the holes.
There are a few considerations for this DIY approach. First, I like the bit of stickiness that the feet give the case so it doesn't slide around, so I want something on the outside. Second, some people may not be comfortable taking apart the case and may not even have a properly sized Phillips screwdriver. Third, if you haven't seen the instructions for removing the cover, you may not realize that the screws on the front and sides of the cover go in at an angle. Even though I wanted my new feet to be installed on the outside, I wanted to look around on the inside to see if there were any loose foot parts lying around in there.
It happens that I have a screwdriver that came with a memory expansion kit, so I used that. If you need to purchase one, it's a size 00. I laid down a large towel on my work service to keep from scratching the top cover when working on the upside down MBP, and to collect any run-away screws so they wouldn't end up on the floor. I removed the screws and set them on the towel next to the holes they came out of so I would get them beck into the same place they came from when reinstalling. Note that there is one short screw in the back and the rest are longer, at least on my model. That's why it's important to keep track of them.
With the back off I could see that there was a lot of dust inside the case already, probably mostly from the vent fan pulling it in. I cleaned up using a vacuum cleaner and a soft paintbrush.
Before starting the job I went to Home Depot and checked out the selection of feet in the area where they have stick-on pads to prevent furniture from scratching floors, etc. I chose 2" wide, thin, adhesive-backed pads that came in a package of 8 for about $2.50. I liked the shape because it thought it would be less likely to peel off than a taller pad, and there was no question that it would completely cover the holes in the case.
This is a good time to punch out any feet that didn't separate on their own. Next I cleaned the bottom panel with alcohol so the adhesive would be effective and put the pads in place, nearly centered over the original foot holes, but offset enough so as to not cover the screw holes. I firmly pressed the pads into place, being careful not to allow any wrinkles.
Finally I replaced the panel and secured it with the screws, remembering to angle the screws, except in the rear.
I week later, I love the result. The pads have just the right stickiness and I think they work better than the originals at keeping the computer from sliding away when I'm actually using it on my lap. I haven't noticed any loss of case cooling either, but I think that may be difficult to tell. The fans haven't been running any more than usual. The pads show no tendency to peel off, at least not yet. Every pick your computer with one hand, between your thumb and forefinger? Well, it's very easy with the larger "feet".
Hope this helps.
Jerry

How to fit the footer always to bottom page

How to fit the footer always to bottom page.
Regards

Well, this is relatively simple. There are blue lines on your page with little blue squared arrows on each side. Hover your mouse over them to find out which ones define "Bottom of Page" and "Footer" (you will also see some towards the top of the page for Header). Adjust these so that the "Bottom of Page" line is quite literally the bottom of the page and move the footer one higher about 2 inches or so, depending on how big you want your footer to be. This automatically will define a footer to stay consistantly on the bottom of your page(s) throughout the site even when expanding or shrinking window sizes. Just another great feature of Adobe Muse

Footer seems to be "sticking" to bottom edge of browser window and not bottom of website

Hi, all
I am designing a site in Muse CC (2014) and have my footer on the master template located in the designated footer area. But for some reason the footer is anchoring or sticking along very bottom edge of the browser window instead of at the bottom of the live website area. Below is a link to the website:
Home
You may need to adjust your window and drag down to see whats actually happening, since on first appearance it seems to sit correctly at bottom edge of website.
Thanks for your assistance!!
Howard

No, its still not correct. It looks like it upon first appearance but if you reduce the view so you can get space below the website, the footer stays fixed to bottom edge of browser window. Seems to happen in most browsers not just Safari. You need to stretch the browser window down and footer moves with it. Thanks.

Footer at the bottom in ALL browsers

I have been "fighting" quite a while with Dreamweaver (CS4) being a beginner, to make a page that takes the whole monitor whatever the browser and the dimensions of the screen are. The major problem seems to be the footer, that in Safari is visible where it is supposed to be (at the bottom of the page, always visible) while in Internet Explorer but also in Firefox it shifts upwards either at the top or at the middle of the page or far below, stretching the page (and at that point scrolling is inevitable and a funny empty area is produced between the page and its lonely footer...)
The page I am talking about is this:
www.greenb.it/home.html
I can copy the html code of my work, if requested.
I am super-grateful for any help I will get
THANKS - valeria

Done... But how do I have to design the upper elements in the page in order to have the exact location of the footer and no scrolling bar on the right?
You can't do this safely. You never know what the exact height of the page is going to be because you cannot know how the visitor has configured their browser to display the content. Guess wrong and your page becomes a mess in a hurry.
Is there a way to make the footer stay THERE even if I reduce or enlarge the page?
Not easily - the problem is that even though the browser viewport might be tall, if the page doesn't have much content, it would end somewhere in the middle of the viewport, and the fixed position's bottom is taken from the bottom of the page, not the bottom of the viewport. But you can try making the html have a height of 100% and see if that works.
Maybe everything has to be structured in % and not in px, right?
IE6/Mac? Really? Forget that browser. It's a dead duck.
FF? I'm not seeing that on my Mac. By the way, your decision to locate your content on the page using absolute positioning is a very poor layout choice. Try increasing the text size and you'll begin to see the content overflowing the containers for the text. It's a potential big mess. Also, you have a frank error in your CSS -
     background-position: 10px top;
-->
<!--
.testo {
     font-family: Arial;
     font-size: 12px;
     line-height: 21px;
You cannot have HTML comments in a CSS file....

Footer Sticking

* Edit - I managed to solve the issue on my own. When I moved the footer bar below the text it stopped trying to shove the text down. Now everything is exactly where I want it. Hope this is helpful to someone!
Hey all,
I've recently switched over from using Dreamweaver to Muse and so far I love it. But, I'm having a bit of an issue with the footer. I want it to stick to the bottom of the page rather then the bottom of the browser. I have already tried turning of 'sticky footer' in 'site proporties' and I also made sure that it was not checked off as a footer item. Even after all that, this portion of text is not staying where it is supposed. It looks fine until I sawp to preview mode, preview the site in my browser or click off the master page onto one of the child pages.
Any suggestions? I've included a few images incase anyone needs the visual.

She will....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"KarenJ" <[email protected]> wrote in message
news:fnr55e$ccs$[email protected]..
> Hi Murray, thanks, so I'm off the hook :-)
>
> Actually my client would care - she had me change all
the 1\ 2\ 3\ to
> 1/ 2/ 3/ on another site.... let's hope she doesn't up
her screen res:-)
>
> Thanks,
>
> Karen
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:fnr4vq$c8f$[email protected]..
>> You can't, really, other than by using frames. Let
the footer float
>> beneath the contents. Nobody cares, really.
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>> ==================
>>
>>
>> "KarenJ" <[email protected]> wrote in message
>> news:fnr1mh$8us$[email protected]..
>>> Hi Cas - I didn't fix it - I have just looked on
another pc and it was
>>> fine - I have been messing about with screen
resolution and it seems
>>> that when the res goes above 1280x768 the footer
has a gap below it if
>>> the content does not push it all the way down -
not sure how to fix it
>>> though, will keep at it,
>>>
>>> Thanks,
>>>
>>> Karen
>>>
>>> "cas2073" <[email protected]>
wrote in message
>>> news:fnqrsm$2sj$[email protected]..
>>>> Did you fix your problem? I looked at your
website using IE and the
>>>> footer looked fine and I'm having that same
problem and can't fix it.
>>>> How did you fix it?
>>>
>>
>

Footer at the bottom of the page in Smartforms

Hi All,
I need to print some Sales data and then a hard coded paragraph at the end of last page of the print out n Smartform.
Now the problem is:
1. If I put that paragraph in the footer then it prints as soon as the data ends in main window and not at the bottom of the page. Eg : If the data ends at the 5 line of the second page then the paragraph is printed immediately after that and not at the bottom.
2. If I put it in another window and give the option only after end of main window then except the last page that space for that window is empty and if I try to overlap main window then even on the last page if the data is till end of that page main window data gets overlapped on the hardcoded paragraph.
Please help me on the issue.
Thanks,
Sameer
Edited by: sameer_rk022 on Mar 31, 2011 10:04 AM

Hi,
Solution: The issue faced after overlapping the main window with footer window can be achieved by creating a folder within the main window and using the events to check whether there is enough space to print the footer.
Following are the steps.
Step 1: Create a Secondary window say “Footer” which would be the footer window. Overlap the main window on the footer window as shown below.
The footer window will be behind the main window
Step 2: Create a folder within the main window say “Check_Footer”.
Go to Tab “Events”, select the checkbox “Footer with Height” and give the required height of the footer. Select the checkbox “at End of Table”. Specify the “Minimum height” as required.
Now, go to “Conditions” tab and select the checkbox “Only before end of main window”.
This is basically done to check whether there is enough space to print the footer on that page. The Footer window would then print the output.
Step 3: Go to the created “Footer” window .Under the Conditions tab, select the checkbox “Only after end of main window”. Create a text/tamplate/window whatever you want to display at bottom or footer data.
Step 4: Save & Activate the Smartform and check the output.
regards
Rohit

Footer at the bottom of the last page only

I am doing a dynamic form which has drop down rows (click the + button, then a new row will be created, so the user can have as many rows they prefer, then there is a footer with E-signature in it (hopefully the footer can be shown at the last bottom page only) ).
My issue now: So when I have 2 pages of forms in total, the bottom of the first and second page will both have the footer (Signature). However, if there are 3 pages of form in total: the bottom of the first and third page will both have the footer (Signature), but not the second page.
What I want: How can I ONLY have the footer (signature) at the bottom of the last page, not on the first page, no matter how many rows and pages the user created ?
I can screen shot the form if needed. Please help.
Many thanks

Hi,
Find the total number of pages which is a standard variable and also the current page number which is a standard variable. Using events hide in other pages or make it visible only in last page

Displaying the page footer at the bottom most part of the page

Hi ,
I am using page footer region inside the jspx page under </af:panelBorder> tag , it is showing my region where the last TAG ends but i want to show the region at the bottom most of my page i.e. i need some vertical white spaces so that the region should shift at the bottom most of the page .
I am using the footer region in every jspx page , so i have to make changes in the region only so that it can be shown at the bottom most of the browser
<af:region id="pageFooterTest"
regionType="test.pageFooter"/>
My region is :
<af:panelHorizontal halign="center" id="abc" >
<af:outputLabel value="#{messageBean.TDN_GEN_BROW_INFO}" styleClass="test12" id="xyz"
shortDesc="To turn on the Compatibility View in IE 7 or IE8, select Tools menu, and click Compatibility View."/>
</af:panelHorizontal>
Please help me to shift the above region to the bottom of the page as I am using Jdev 10.1.3 .
Edited by: Vipul B on Feb 21, 2010 11:55 PM

hey bud...
thank you for the information...
i tried doing so...but its not working...not throwing any error on the server, nor its displaying the image........
jsp code = <img src="ImgServ?fn=/home/chintan/logo.gif">
web.xml =
<servlet>
<servlet-name>ImageServlet</servlet-name>
<servlet-class>ImageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ImageServlet</servlet-name>
<url-pattern>/ImgServ</url-pattern>
</servlet-mapping>
servlet code :
public void doGet(HttpServletRequest req, HttpServletResponse res) throws I
OException, ServletException {
String fileName = req.getParameter("fn");
res.setContentType("image/gif");
can u tell me what it can be....? and Hopefully i can call a gif / jpg file for the src in image tag right?
Thank you for your time bud....my doubts can be silly please bear with me...
regards,
chintan

Footer at the bottom of the last page

Hello,
My template BI / Publisher is a page, but when it is executed it may be several pages. I want the footer that appears on the last page, that it's ok, but, and at the bottom of the last page.
Have you any idea?
Thanks.

With the tag :
Avant le truc.
+<?start@last-page-first:body?> <?end body?>+
Après le truc.
I have the error :
Font Dir: C:\Program Files\Oracle\XML Publisher Desktop\Template Builder for Word\fonts
Run XDO Start
RTFProcessor setLocale: en-us
FOProcessor setData: D:\Documents and Settings\bPitault\Bureau\Reporting\SWM_SPE_OM_106\DATA_INT_20080922.xml
FOProcessor setLocale: en-us
java.lang.NullPointerException
+     at oracle.apps.xdo.template.fo.area.PageNumber.formatString(PageNumber.java:104)+
+     at oracle.apps.xdo.template.fo.IDManager.registerId(IDManager.java:44)+
+     at oracle.apps.xdo.template.fo.area.AreaTree.registerLastPageJoinSeq(AreaTree.java:1106)+
+     at oracle.apps.xdo.template.fo.area.AreaTree.incrementJoinSequenceIndex(AreaTree.java:219)+
+     at oracle.apps.xdo.template.fo.area.AreaTree.registerLastPageDocument(AreaTree.java:1089)+
+     at oracle.apps.xdo.template.fo.area.AreaTree.forceOutput(AreaTree.java:471)+
+     at oracle.apps.xdo.template.fo.elements.FORoot.end(FORoot.java:58)+
+     at oracle.apps.xdo.template.fo.FOHandler.endElement(FOHandler.java:386)+
+     at oracle.xml.parser.v2.XMLContentHandler.endElement(XMLContentHandler.java:196)+
+     at oracle.xml.parser.v2.NonValidatingParser.parseElement(NonValidatingParser.java:1212)+
+     at oracle.xml.parser.v2.NonValidatingParser.parseRootElement(NonValidatingParser.java:301)+
+     at oracle.xml.parser.v2.NonValidatingParser.parseDocument(NonValidatingParser.java:268)+
+     at oracle.xml.parser.v2.XMLParser.parse(XMLParser.java:149)+
+     at oracle.apps.xdo.template.fo.FOProcessingEngine.process(FOProcessingEngine.java:279)+
+     at oracle.apps.xdo.template.FOProcessor.generate(FOProcessor.java:1022)+
+     at RTF2PDF.runRTFto(RTF2PDF.java:626)+
+     at RTF2PDF.runXDO(RTF2PDF.java:460)+
+     at RTF2PDF.main(RTF2PDF.java:251)+

Making image stick to one element of a movie

Hello everyone,
I'm just starting with Adobe Premiere and have come across a big challenge for me now.
I have a very short movie http://www.youtube.com/watch?v=SqG6yLnzBR8&feature=youtu.be and a small thermostat on the wall.
THe thermostat becomes bigger and bigger, simultaneously circling. My task is to add a company logo at the bottom of that thermostat.
Obviously the logo must stick to that thermostat and circle with it so that nobody notice that its an applied layer.
Is it possible to achieve that in Adobe Premiere?
Thank You for any piece of advice.

Questions about After Effects are best asked in the After Effects forum, where the After Effects experts hang out.
http://forums.adobe.com/community/aftereffects_general_discussion?view=discussions

CSS Display table with the bottom border alone

Hi all,
I am very poor in CSS, I badly in need of a style.
I want the table with the bottom border alone
i tried like
<table frame="below" cellpadding="2px" cellspacing="0" style="overflow:scroll;empty-cells:show;border:1px solid #285577;" width="350px">';
but frame="below" is not working with IE-7
Please could any give me a solution.
thanks in advance
bye
Srikavi

Srikavi,
I do not know what kind of table you exactly need but
<table style="border-bottom: 1px solid #285577;">
should do the work.
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://apex.oracle.com/pls/otn/f?p=31517:1
-------------------------------------------------------------------

Can't pin footer menu to bottom in mobile website

Hi there,
I am designing my first mobile version of a website. I created a footer menu that must stay at the bottom all time while the other content above is scrolling. This does not work. The option to pin the element is not available (stays grey and cannot be selected). Whether I try to do it in the master-page or in the page itself, whether I mark it as footer or not, whether I put it on a layer which is on top of all or not - nothing works. I am really annoyed and I would be very very very happy if someone could help. Thank you.
bartl

Of course, here we go:
1.) fixed header: scroll motion is activated but anchor position and movements are set to zero.
2.) fixed footer: scroll motion is activated, anchor position is set to zero. You can either put the movement before anchor to 1 or also to 0, both is fine (important is the anchor position). Movement after anchor is set to zero.
I hope that helps.
Best,
bartl

Footer at the bottom of every page

I need to place a footer in every page of an application. The footer can be a jspf or html file.
What I want is to place the footer after the last item of each page (can be a table, text field, etc).
I would like it to render correctly both in IE and Firefox.
I need the JSP code clip so I can place it in every jsp because the project has ~150 jsp's.
Thanks in advance,
Ant�nio

You could use 'Page Fragment Box'. Check the online help for "Page Fragment Box".
'This component enables you to include a page fragment in a page. A page fragment is a separate, reusable part of a page that can be included in any number of pages. For example, you might want to put a common a visual element like a header graphic in a page fragment and then include it in all the pages in an application......'
Hope that helps.

CSS Making footer stick to bottom

Similar Messages

Maybe you are looking for