Grow your CSS skills. Land your dream job.

Element flush with page bottom

  • # June 30, 2009 at 3:15 pm

    Okay, so here’s my problem: I have a centered design enclosed in a containing div. I want to, in addition, position an element flush with the bottom of the page and have it expand 100% of the viewport (it will have flames in it). How would I do this while preserving my layout?
    What I tried to do was to absolute position the body and relatively position the div (#bottom for future reference) and add bottom: 0; and fill it with images. The result? The layout got off-center, the images were not flush to the page bottom, and the image’s origin was not at the bottom of the page. Oh, and it didn’t expand to the full pagewidth.

    # June 30, 2009 at 3:17 pm
    "PlasmaSheep" wrote:
    Okay, so here’s my problem: I have a centered design enclosed in a containing div. I want to, in addition, position an element flush with the bottom of the page and have it expand 100% of the viewport (it will have flames in it). How would I do this while preserving my layout?

    you mean show the flames all the time?
    if so: viewtopic.php?f=8&t=1734

    # June 30, 2009 at 3:35 pm

    No, by "page bottom" I meant where the fold is when the viewport has scrolled down the most it can.

    # June 30, 2009 at 3:54 pm

    Just clear your container and follow it with a div with a width of 100%

    # July 1, 2009 at 2:29 am

    we are not all the same at coding everything, but I would relative position your divs, so that your footer/flames is relative to your main content and always after it.

    but as the man says, it’s that simple

    # July 1, 2009 at 2:18 pm

    Well, okay, say I managed to get the footer the full width of the window. That doesn’t guarantee the element being flush with the fold, right?

    # July 1, 2009 at 2:51 pm

    Sorry, you have lost me. Can you explain again in plain English what you are trying to do.

    # July 1, 2009 at 6:42 pm

    Okay. Div. Name is #bottom. Needs to expand the full width of the viewport. Must also be touching the bottom of the viewport. Will contain a horizontally tiled image, so bottom of image must be flush with the bottom of the viewport.

    # July 2, 2009 at 3:20 am

    So all you want is a sticky footer. http://ryanfait.com/sticky-footer/

    # July 2, 2009 at 2:11 pm

    No, it seems like my explanation is bad. The footer must be at the fold when the page is scrolled down all the way (it’s static).

    # July 2, 2009 at 2:55 pm
    Code:
    #footer {
    width: 100%;
    height: whateverpx;
    position: fixed;
    bottom: 0;
    }

    Check this if you want it to work in ie6 http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/

    # July 2, 2009 at 7:08 pm

    No, you don’t understand. the footer needs to be at the… See image.

    # July 2, 2009 at 10:37 pm

    You say you don’t want a sticky footer, you don’t want a fixed footer and you don’t want a normal footer, sorry but you have lost me. Anybody else?

    # July 3, 2009 at 7:00 pm

    Um, I do want a normal footer that is in full contact with three sides of the browser window.
    Like the image in my previous post. Sorry if I’m being particularly confusing.

    # July 3, 2009 at 7:18 pm
    "PlasmaSheep" wrote:
    Um, I do want a normal footer that is in full contact with three sides of the browser window.
    Like the image in my previous post. Sorry if I’m being particularly confusing.

    ok, I think I know what you want.

    Code:
    #footer
    {
    position:relative; //to be relative to the last element, hopefully your putting it at the end of your page
    left:0px; //not needed really
    width:100%; //essential to get full window width
    height: 50px; //or whatever
    background-image:url(your flames);
    background-repeat:repeat-x; //horizontally
    }
Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".