Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Element flush with page bottom

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #25316
    PlasmaSheep
    Member

    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.

    #59953
    ikthius
    Member
    "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

    #59954
    PlasmaSheep
    Member

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

    #59959
    apostrophe
    Participant

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

    #60016
    PlasmaSheep
    Member

    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?

    #60017
    apostrophe
    Participant

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

    #60028
    PlasmaSheep
    Member

    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.

    #60059
    apostrophe
    Participant

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

    #60079
    PlasmaSheep
    Member

    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).

    #60082
    apostrophe
    Participant
    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-/

    #60094
    PlasmaSheep
    Member

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

    #60109
    apostrophe
    Participant

    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?

    #60161
    PlasmaSheep
    Member

    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.

    #60164
    PlasmaSheep
    Member

    That’s almost it, except there’s some empty space between the bottom of the page (see screenshot)

    #60177
    PlasmaSheep
    Member

    I can’t unfortunately show you the page as it is currently only on my machine. Your example has almost everything I want, but there is still space between the bottom of the viewport and the flames (see http://css-tricks.com/forums/viewtopic.php?f=2&t=3153&start=10#p14665 that post, the spot labeled "Empty space").
    I also can’t take a screenshot of the element in firebug (when it’s color coded) but the line of images are colored blue and the space below is uncolored, which seems to mean that the element really is at the bottom of it’s containing element (body).
    However, if I make the height of the footer 30 px (twice one image) and have it disregard repeat-x, then I can fit two rows of images (see attachment), however, I can’t make it 15 px and have one row of images. This makes me wonder if this can be done with a 30px high image.

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘CSS’ is closed to new topics and replies.