PDA

View Full Version : How to force footer line to the bottom of the page



vinyl-junkie
Jan 15th, 2007, 06:56 AM
When I first display this page (http://www.techtipscentral.net/Search.asp), it doesn't display the footer line at the bottom of the page. I can't use absolute positioning because the page does expand once the search form is filled in and the results displayed.

For example, enter the search term "convert" (without the quotes) in the search box, then hit the Submit button. The footer displays at the bottom of the page exactly as I want it to. So how do I get the footer to display at the bottom when I first go into the page?

p.s. - My stylesheet is here (http://www.techtipscentral.net/styles.css).

Arbitrator
Jan 15th, 2007, 01:24 PM
You should be able to do this by…


… setting the heights of the html and body elements to 100%.
… setting the min-height property of the *#contents element to 100%.
… putting the *#footer element inside the *#contents element and absolutely positioning it to the bottom of the *#contents element.
… putting padding at the bottom of the *#contents element equal to the height of the *#footer element to ensure that there is no overlap.

On an unrelated note, you may want to explicitly specify that the background color is white instead of making assumptions. I think visiting the page you referred to with a user‐specified background color that isn’t the default of white should make the reason clear enough. Likewise, you may want to do the same with the text color. You can change those settings in Firefox by going to “Tools”, “Options”, the “Content” tab, and clicking the “Colors” button.

vinyl-junkie
Jan 15th, 2007, 04:50 PM
Well, I thought I had tried everything you suggested already, plus the one thing that worked (that I thought I had also tried). I absolutely positioned the footer below #contents, and that seemed to work. While I was at it though, I added padding-top and padding-bottom attributes to make the footer look a little nicer. Maybe that made some difference too. All I know is, it seems to work now. Thanks for your help! :thumbsup:

<edit>
I spoke too soon. When I fill in that search page as described in my original post, the footer displays in the middle of the page. Back to the drawing board! :(
</edit>

rmedek
Jan 15th, 2007, 05:06 PM
The technique Arbitrator's describing is detailed here (http://www.themaninblue.com/experiment/footerStickAlt/), complete with examples and alternatives… hopefully that helps.

vinyl-junkie
Jan 15th, 2007, 07:32 PM
Please correct me if I'm wrong, but the problem as I see it is that I don't have a fixed length web page. The page is the size of the browser window when you first get into it, but then it expands to whatever length of display is needed for the search results. I don't see how I can accommodate both fixed and variable length within my CSS. :confused:

I may just redesign that page so that it is similar to the search page on my other site. That will eliminate the need for worry about this footer business. :(

_Aerospace_Eng_
Jan 15th, 2007, 07:55 PM
That is why you used a min-height of 100% allowing the height of the layout to resize keeping the footer at the bottom. Note: the parent containing div, the one with min-height set needs to be position:relative for the footer to be positioned correctly.

Basic example: http://bonrouge.com/hcf-fluid.php

Click on the Remove Content button on that example to see how it looks without content. The footer sticks to the bottom at all times.

vinyl-junkie
Jan 15th, 2007, 08:03 PM
As near as I can tell, I've followed all the suggestions here, and I still have that darn footer in the middle of the screen. Can someone take a look at it again and tell me what I'm doing wrong?

_Aerospace_Eng_
Jan 15th, 2007, 08:41 PM
Remove height:100%; from the #contents div. I dont see where you set the html and body to 100% height and the #footer needs to be inside of #contents not outside of it. And your footer isnt even absolutely positioned to the bottom.

vinyl-junkie
Jan 16th, 2007, 12:46 AM
Remove height:100%; from the #contents div.
Done.


I dont see where you set the html and body to 100% height
That is defined here:


html, body {
min-height: 100%;
width: 100%;
height: 100%;
}


and the #footer needs to be inside of #contents not outside of it.
I had been going back and forth on that one. Fixed, per your directions.


And your footer isnt even absolutely positioned to the bottom.
Again, fixed per your directions. This is something else I had been going back and forth on. Still, the footer sits well above the bottom of the screen, no matter what I do. Any ideas what I'm missing?

_Aerospace_Eng_
Jan 16th, 2007, 01:40 AM
Get rid of this

html>body, html>body #contents, html>body #contents #container {
height: auto;
}
You still haven't made #contents a min-height of 100%. You need to get rid of width:100% and min-height:100% in the html and body elements as well.

Arbitrator
Jan 16th, 2007, 08:26 AM
I absolutely positioned the footer below #contents, and that seemed to work.There is a reason why I said to put the footer inside. If it’s outside, you’re absolutely positioning the footer relative to the viewport. If it’s inside the relatively positioned *#contents element, it’s absolutely positioned relative to the *#contents element, which is what you want.


html, body {
min-height: 100%;
width: 100%;
height: 100%;
}

html>body, html>body #contents, … {
height: auto;
}This code is redundant and against the instructions I provided. Setting a min-height on an element that already has a height specified is pointless. The height of the body element must be 100%, not auto. The width of the html, body, and div elements should also effectively be 100% by default anyway, so specifying that is pointless. Likewise, the heights of all of those elements should also be auto by default, so specifying that is also pointless. I’m assuming that you’re trying to exploit flaws in Internet Explorer 6; I would do that with the using the star‐HTML exploit instead so that it’s clearer as to what’s going on.

The above code is equivalent to this in a compliant browser:

html { width: 100%; height: 100%; min-height: 100%; }
body, *#contents { width: 100%; height: auto; min-height: 100%; }

It should be:

html, body { height: 100%; }
*#contents { min-height: 100%; }
* html *#contents { height: 100%; } /* if IE6 is required */