23 replies [Last post]
maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 49 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

This footer demo does

This footer demo does exactly that.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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*/ }

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

maxplanck735 wrote:thanks a

maxplanck735 wrote:
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 Smile

maxplanck735 wrote:

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?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 49 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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?

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

kk5st wrote: to simply

kk5st wrote:

to simply eliminate the space;
#footer p {
  margin-bottom: 0;
  }

Aha! doing what you said killed the space, thanks gary and hugo

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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; }

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

yep, that fixed it, i had to

yep, that fixed it, i had to kill the padding in #main.

Thanks a lot guys!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 49 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

maxplanck735 wrote:when i

maxplanck735 wrote:
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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 49 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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(Drunk.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 49 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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*

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

maxplanck735 wrote:thanks a

maxplanck735 wrote:
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.

maxplanck735 wrote:

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 49 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

maxplanck735
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me