Is there a way to set the bottom of a div box to be at the bottom of the window if the content inside of the div box doesn't fill the whole window vertically, but if the content does fill the whole window vertically or extends beyond the bottom of the window more, then make the bottom of the div box end at the bottom of the content?
I hope this makes sense, if not please let me know and i'll try to describe better
Thanks, any help is much appreciated
/mod edit/title fixed/tph
This footer demo does
thanks a lot! does this
thanks a lot! does this work in IE6, 7 and the other modern browsers?
what does the ">" in this part of the code do? I've never seen a lone ">" in css before...
html>body #wrapper {
height: auto; /*this undoes the IE hack, hiding it
from IE using the child selector*/
}
when i look at this in IE7,
when i look at this in IE7, the footer is at the very bottom of the page. But if i look at it in Firefox 1.5.0.10, the footer is a little higher than the bottom of the page...
maxplanck735 wrote:thanks a
thanks a lot! does this work in IE6, 7 and the other modern browsers?
Test it and find out! fwiw it's not likely not to
what does the ">" in this part of the code do? I've never seen a lone ">" in css before...
It's the child combinator, it's part of your basic selector arsenal , it may benefit to check out a few CSS selector tutorials, I would go through this guide for a thorough understanding.
http://css.maxdesign.com.au/selectutorial/
As for FF 1.5 why are you worried we're up to 2.02, if memory serves, hows it look in that browser?
doh, thanks hugo, i didn't
doh, thanks hugo, i didn't realize that my ff was out of date.
but i upgraded, and the footer still doesn't appear at the very bottom of the page when viewed in ff2.0.0.3. it looks like there's still one line of blank space between the footer and the bottom...
Well all I can say is that
Well all I can say is that Gary's demo shows the #footer element stuck to the bottom of the viewport, no gaps. So I would have to assume that there is some discrepancy between your implementation and his example, so you will need to show the code you're working with in order to work out what's happening.
Hugo.
Mishandled margin collapse
IE improperly collapses the p margin through the AP container and through body and html! AP element margins do not collapse, well, not in modern browsers.
Not tested.
A common fix that works well with floats is to explicitly set the collapsing margin. In this case:
to make IE act like modern browsers;
#footer p { margin: 1em 0; /*the usual default value*/ }
to simply eliminate the space;
#footer p { margin-bottom: 0; }
cheers,
gary
when i look at gary's demo
when i look at gary's demo page in the latest firefox, the footer isn't at the very bottom of the page (it's one line above the bottom).
Is it not like that for you guys?
kk5st wrote: to simply
to simply eliminate the space;#footer p { margin-bottom: 0; }
Aha! doing what you said killed the space, thanks gary and hugo
hey guys, another
hey guys, another question...
I changed the width below from 80% to 100%, because the 80% was making a horizontal list that I have on my page too narrow. But making this change makes the footer appear lower than 100% (i.e. there is a vertical scrollbar, and the content on the page doesn't fill the page vertically).
#main {
height: auto;
padding: .5em;
padding-bottom: 3em; /*Keeps content above footer. Originally
used margin, but a bug in Opera7 seemed
to add spurious margin, pushing the
footer beyond the viewport even with
short content. */
width: 80%;
margin: 0 auto;
}
i'm stumped, why does changing the width mess up the footer's position?
#main {
height: auto;
padding: .5em;
padding-bottom: 3em; /*Keeps content above footer. Originally
used margin, but a bug in Opera7 seemed
to add spurious margin, pushing the
footer beyond the viewport even with
short content. */
width: 100%;
margin: 0 auto;
}
oh ok, i think it's the
oh ok, i think it's the padding that's causing this, lemme see if i can work this out...
yep, that fixed it, i had to
yep, that fixed it, i had to kill the padding in #main.
Thanks a lot guys!
maxplanck735 wrote:when i
when i look at gary's demo page in the latest firefox, the footer isn't at the very bottom of the page (it's one line above the bottom).
Is it not like that for you guys?
Yes, it is. That's how it should appear. The bottom edge of the p's margin is at the bottom of the container. If you give the #footer div a background color, you will see it is at the bottom, without a gap. IE improperly collapses margins under certain conditions.
See Meyer on Uncollapsing Margins.
cheers,
gary
ok, i ran into a little snag
ok, i ran into a little snag while trying to implement this on my site.
i know that this method relies on the natural flow of items inside of div.main, so if any of the items inside of main are positioned and thus taken out of the flow, this will mess up the footer's position.
i was relying on the z-indexing that is allowed when using positioning to control the layering order of elements on my site. if i take out the positioning in order to make the footer work right, then my layering order gets messed up (since z-indexing only works for positioned elements).
i know that in the absence of positioning/z-indexing, the layering order is defined by the order of appearance in the HTML document. At this point, should i resort to this? Is there any other way to control the layering order other than z-index/positioning or HTML order of appearance?
Positioning has gotchas
I seem to have few reasons to use positioned elements. In fact, this footer thing makes me cringe because of them; that and the concept of forcing a full window instead of letting the content decide how tall the page is.
Please give us a link to the page. Positioning has too many gotchas to allow for guessing at the problem cause(.
cheers,
gary
thanks gary, here's the
thanks gary, here's the link:
http://www.chicagolandaudioconsultants.com/lessonsandtraining.html
the footer is at the bottom of the window when it first opens, instead of at the bottom of the page, because div.content is positioned. If you take out positioning from div.content, the footer jumps down to the bottom of the page, but then the header, menu and little blue sidebar get messed up because the specified z-index of div.content no longer works without positioning.
thanks again
So, get rid of the AP
So, get rid of the AP properties.
div.whiteout {} #navcontainer {} #navlist { text-align: center; padding: 3px 0; margin-left: 0; margin-top: 0px; border-bottom: 1px solid #778; font: bold 13px Verdana, Arial, Helvetica, sans-serif; } #navlist li { list-style: none; margin: 0; display: inline; } #navlist li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DFF1FA; text-decoration: none; } #navlist li a:link { color: #667; } #navlist li a:visited { color: #667; } #navlist li a:hover { color: #565669; background: #B7E1F5; border-color: #778; } #navlist li a#current { background: white; border-bottom: 1px solid white; } body { margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; } div.center {} div.header { background: white url("images/headerbg.jpg") repeat-x 0 0; } #contentmargin { margin-left: 3%; margin-top: 107px; margin-right: 3%; } div.content { background: url("images/marginrepeater4.jpg") repeat-y 0px 0px transparent; } h3 { text-align: center; font-size: 12pt; } ul.icanshow { margin: 1em 0; } html, body, #wrapper { min-height: 100%; /*Sets the min height to the height of the viewport.*/ width: 100%; height: 100%; /*Effectively, this is min height for IE5+/Win, since IE wrongly expands an element to enclose its content. This mis-behavior screws up modern browsers*/ margin: 0; padding: 0; } html>body #wrapper { height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/ } #wrapper { position: absolute; top: 0; left: 0; } #main { height: auto; padding: 0; padding-bottom: 3em; /*Keeps content above footer. Originally used margin, but a bug in Opera7 seemed to add spurious margin, pushing the footer beyond the viewport even with short content. */ width: 100%; margin: 0 auto; } #footer { background: url("images/marginrepeater4.jpg") repeat-y 0px 0px transparent; position: absolute; bottom: 0; width: 100%; margin-left: 0%; } #footer p { margin-bottom: 0; text-align: center; }
There is/was no purpose to all your absolute positioning. You will need to move the banner section to precede the nav bar.
cheers,
gary
Hmm the truth dawns, now
Hmm the truth dawns, now that we finally see the page!
Why oh why are you positioning the layout using 'Absolute'? is there a specific reason?
Of course the footer is where it is it's where you have said it must be in relationship to the viewport, forget the rest of the layout , it does not figure in things due to your use of postion absolute.
position:absolute *sigh* full height pages *sigh*
thanks a lot, you guys are
thanks a lot, you guys are the best!
can i ask a couple more questions?
how can i make the blue bar that lines the left edge of the screen connect to the blue bar on the left edge of the footer?
also, i'm trying to make the top of the blue bar that lines the left edge of the screen just touch the bottom of the line at the bottom of the navigation list... but the navigation list (which i got from listamatic) has a white space at the bottom that i can't seem to get rid of, and don't understand where it's coming from... do you know a good way to make this happen?
thanks again!!
updated code is here: http://www.chicagolandaudioconsultants.com/lessonsandtraining.html
maxplanck735 wrote:thanks a
thanks a lot, you guys are the best!
can i ask a couple more questions?
how can i make the blue bar that lines the left edge of the screen connect to the blue bar on the left edge of the footer?
the gap is being caused by the padding you have on #main remove it.
Is the requirement still for position absolute on the footer? I would remove it and replace with clear:both plus possibly a little padding.
also, i'm trying to make the top of the blue bar that lines the left edge of the screen just touch the bottom of the line at the bottom of the navigation list... but the navigation list (which i got from listamatic) has a white space at the bottom that i can't seem to get rid of, and don't understand where it's coming from... do you know a good way to make this happen?
You're probably going to need to re-think things then and move the navlist into .content or put the border on #main something along those lines, have a look and think about where you have things placed.
Move background: url("images/marginrepeater4.jpg") repeat-y 0px 0px transparent;
onto the #main ruleset and then play with things.
Move the blue bar image to
Move the blue bar image to #wrapper and alter
#navcontainer { background-color: white; padding-top: 5px;}
Hugo is right about the rethink. If you're going to have enough content to push the footer down anyway, there's no need for the shenanigans.
cheers,
gary
wow, it's looking good
wow, it's looking good now!
some pages on this site are going to have content stretching beyond the bottom of the screen, while others aren't, so this footer technique is exactly what i'm looking for =)
from experimenting, it looks like the footer requires position: absolute, or else it won't sit at the bottom of the page in the case where the content inside of main doesn't fill the page vertically.
thanks again for all the help! =D
There is another approach
There is another approach one can take with the footer placing it outside the full height element and using a negative top margin on the footer to pull it back up into the visible viewport, but both methods work, both will require some form of padding of the footer space to prevent the content above slipping behind the footer out of view.