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.
you mean show the flames all the time?
if so: viewtopic.php?f=8&t=1734
Check this if you want it to work in ie6 http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
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.
You must be logged in to reply to this topic.