homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS absolute bottom align?
looking everywhere for this and can't find it
stuntdubl

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 268 posted 9:03 pm on Aug 5, 2002 (gmt 0)

Is there a <div> tag to align to the absolute bottom of a page? I'm looking to put footers on my pages, but can't find a good way to do it. Any help here would be appreciated.

 

martinibuster

WebmasterWorld Administrator martinibuster us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 268 posted 9:54 pm on Aug 5, 2002 (gmt 0)

Good one. I'm interested in this as well.

moonbiter

10+ Year Member



 
Msg#: 268 posted 10:34 pm on Aug 5, 2002 (gmt 0)

Theoretically, this should work:

<html>
<head>
<title></title>
<style type="text/css">
div#footer{
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<div id="content">
<p>This is some content</p>
</div>
<div id="footer">
<p>This should be on the bottom.</p>
</div>
</body>
</html>

But in fact this only works in Gecko-based browsers (Mozilla, etc.). This is because most other browsers currently don't support the position: fixed property of CSS 2 yet.

Position: absolute; bottom: 0px; doesn't work for long documents because the content will continue under a footer positioned in such a manner. This is due to the fact that the positioning values for absolute elements are based on that element's containing block [w3.org], which in the case of visual browsers usually defaults to the viewport.

stuntdubl

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 268 posted 10:45 pm on Aug 5, 2002 (gmt 0)

Thanks for the try moonbiter....but it didn't seem to work for me. Does anyone have a good way to do footers without too much hassle?

mivox

WebmasterWorld Senior Member mivox us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 268 posted 10:55 pm on Aug 5, 2002 (gmt 0)

I make a single footer document called foot.html, which is just the actual footer code (without the <head> section or <body> tags). Then I use an SSI call at the bottom of each page to pull it into the bottom of all my pages:

<!--#include file="foot.html" -->

A copy of foot.html needs to be uploaded to every directory containing files that will use it, in order for that specific SSI call to work.

Assuming your site is hosted on an Apache server, you can either name all your files with the ".shtml" suffix, or insert this line into a file called '.htacces' in the root directory of your site:

AddHandler server-parsed .html .htm .shtml

martinibuster

WebmasterWorld Administrator martinibuster us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 268 posted 11:18 pm on Aug 5, 2002 (gmt 0)

Nice one, Mivox. How do you control positioning? Does the call bring it into a cell?

Do you know any good books that can explain SSI? It sounds like a great way of doing things. Except that if the footer contains links, might it not get spidered?

Thanks!

rcjordan

WebmasterWorld Senior Member rcjordan us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 268 posted 11:22 pm on Aug 5, 2002 (gmt 0)

>Except that if the footer contains links, might it not get spidered?

That's not a problem, include files are read as part of the page.

But will an include footer (or header, for that matter) work on liquid css pages?

mivox

WebmasterWorld Senior Member mivox us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 268 posted 11:25 pm on Aug 5, 2002 (gmt 0)

If you put the call at the bottom of the html, the footer should display at the bottom of the page... or you can put it into a table cell at the bottom of a table layout, and the code will be inserted into the cell. Basically, the code in the file you call will be written into your html/shtml page wherever the actual "include file" call is located. By the time the page gets to the browser, it's just another chunk of regular html code on the page.

Do a web search for "Server Side Includes" for more info...

Links in the footer will be spidered because the server 'inserts' the foot.html code into the requested page before it is served to the browser/spider/etc. Think of it as sort of an OnLoad/DocumentWrite function without the spider-unfriendly javascript.

But will an include footer (or header, for that matter) work on liquid css pages?
AFAIK, if there's a problem with it displaying in a strange position, you should be able to wrap the SSI call in its own <div>, and manipulate that <div> just like a regular page section... or make sure it resides at the bottom of your main content container, just above the closing tag.

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 268 posted 1:31 am on Aug 6, 2002 (gmt 0)

Maybe the challenge you're running into comes from the overall structure of your page - the layout of your divs and the how you use relative/absolute positioning.

Sometimes, even if the footer div is at the very bottom of the HTML document, it may need a clear:all attribute to end up at the very bottom of the page -- instead of some place strange.

The clear attribute's default value is "none", so with some layouts you can have chaos unless you explicitly declare left, right or all as required.

brotherhood of LAN

WebmasterWorld Administrator brotherhood_of_lan us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 268 posted 9:44 am on Aug 6, 2002 (gmt 0)

great tip tedster,

I think thats what some people are looking for here.....I am playing with a top <div> and two/three absolutely positioned divs "on the next line".

Using the bottom alignment just puts it "at the bottom of the screen"- regardless if the page does not scroll, scrolls more than page etc etc.

I'll finally be able to start playing with my bottom divs again :) great

idiotgirl

10+ Year Member



 
Msg#: 268 posted 12:42 pm on Aug 6, 2002 (gmt 0)

re:
<!--#include file="foot.html" -->

You should be able to get away with installing that only once and call from whatever file folder it is installed in. That will save installing it all over the place.

<!--#include virtual="/menus/foot.html" -->

on *nix it should work, granted you have your AddHandler Server Parsed line in .htaccess (ala mivox).

I know it doesn't solve your positioning problem, but you'll only have to upload and update one file that way :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved