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.
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?
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.
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.
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.
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.
#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 }
can you show thte actual page? on a site so we can see the actual code and how it fully looks when working?
the problem we have is we dont know what sizes your using...
this will help us help you immensly
you could try this in your footer bottom:0px; or make your body height:100%
I see your using FF & I hope that is firebug as an extension next to your Adblock, why not use that to se what your element is actually doing, that is what it is there for
here is a crappy test page I made with bad flames http://www.honeycomb-web.co.uk/test ...... I copied my main home page but put the flames at the bottom footer, is this what your after?
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.
it is really hard for us to understand you problem fully without the page, and your not seeming to want to throw up a test page to help us help you......
I have played around with nearly all variations & screen res, the only thing I can come up with to get roughly what you want is to make your footer show at all times by using position fixed.
if you go down any other road, it all depends on the size of your page, I get space after the footer in some screen resolutions depending on the main content areas height. it might fit fine in a 1024x768 but it is a small height in a 1280x1024 res so this shows space at tbe bottom.
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
but as the man says, it's that simple
#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-/
Like the image in my previous post. Sorry if I'm being particularly confusing.
ok, I think I know what you want.
the problem we have is we dont know what sizes your using...
this will help us help you immensly
you could try this in your footer bottom:0px; or make your body height:100%
I see your using FF & I hope that is firebug as an extension next to your Adblock, why not use that to se what your element is actually doing, that is what it is there for
here is a crappy test page I made with bad flames http://www.honeycomb-web.co.uk/test ...... I copied my main home page but put the flames at the bottom footer, is this what your after?
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 could give us the code to test ourselves....
what screen resolution are you using?
if you go down any other road, it all depends on the size of your page, I get space after the footer in some screen resolutions depending on the main content areas height. it might fit fine in a 1024x768 but it is a small height in a 1280x1024 res so this shows space at tbe bottom.