SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align a <DIV> to absolute bottom of page

    Hmm, I seem to be having trouble getting my "footer" div to stay at the bottom of the page. It keeps creeping up!

    http://www.platinumwebsitedesign.com/contact.php

    is an example, the code looks like this:

    Code:
    #footer
    {
    	background-color: #81B038;
    	text-align: center;
    	font-size: 8pt;
    	padding: 2px;
    	clear: both;
    	bottom: 0px;
    	vertical-align: baseline;
    }
    Oh - and it needs to work in mozilla too if possible

    thanks...

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    add position:absolute to your style rules and it will stay permanently on the bottom of the browser window. You may also want to try position:fixed, which will work great on Mozilla and Opera, but IE's support for it is, shall we say, nonexistant.

  3. #3
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but No luck still, it made it worse (lol) (I think i've tried that before actually).

    Any other ideas?

    the code is now:

    Code:
    #footer
    {
    	position: absolute;
    	background-color: #81B038;
    	text-align: center;
    	font-size: 8pt;
    	padding: 2px;
    	clear: both;
    	bottom: 0px;
    	vertical-align: baseline;
    }

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Do you want the bottom of the PAGE, or bottom of the Window?

  5. #5
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah - hehe, that seems to be the problem, I want to be bottom of the page.

  6. #6
    SitePoint Enthusiast Kiddeath91's Avatar
    Join Date
    Jan 2003
    Location
    Columbus, Ohio USA
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are referring to your platinumwebsitedesign web page, I think you need to nest the <div> #footer inside of your main div. If you do this, it should fall right under your last <h2> section called "Pre-built Templates". I think that the italicized testimonials along the right side are pushing down farther than the rest of the document, and this is throwing off your intended effect. The combination of "bottom:0px" and "position:absolute" is making the #footer div stay where it is, even when you scroll down.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think your problem is the absolutely positioned main content.

    In Mozilla the footer is behaving correctly and staying at the base of the right hand column. The centre content will not push the footer down because it is absolutely positoned. (I think IE6 gets this wrong and positions the footer at the bottom of the absolute content which it should not do, but gives you the result you were looking for.....but I may be wrong!)

    If you make your main content float left with no positioning and give it a width of say 50%. Then take away the absolute positioning on the footer also then everything will flow together.

    Although this is not quite as you intended because when the window is resized to about half size the main content will then flow left below the left hand column.

    I've tried this in mozilla and IE6 and they both keep the footer at the bottom of the page and seems to work.

    Hope this helps.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •