How to? Making a footer that sits on the bottom

How to? Making a footer that sits on the bottom

Hi all,
Here´s the deal: I want to make a 2 column fixed layout, with header & footer, centered on the screen. Ok, that´s the easy part, and works fine. BUT... now I want my footer rest on the very bottom of the screen if I don´t have a lengthly content, AND if I have a lengthly content, rest at the end of the page.
I´ve found a method to do that, but it doesn´t work with my layout... any advices???
I´ve put a test-case at:[url]http://www.extremefx.com.ar/temp/
As you can see, my footer sits at the bottom of the screen, regardless of the length of the text...

Thanks in advance!,

that's not as easy as I thought.

You might find something of that flavor at [url]http://positioniseverything.net

M.

Mmmm... may be I´m blind, but I can´t see anything of THAT flavor...

Scipio: Yes... I´ve tried everything...

You might have to use JavaScript to do that, that's what you get when using position:absolute, yes it will stick to the bottom if there is less content - which is fine, but not if there is more, like you have at current.

As far as I know there is no way to do that with a strict doctype and CSS as of yet, except if you use Javascript to position the footer.

Veerle recently wrote about that in her article:

[url]http://veerle.duoh.com/comments.php?id=233_0_2_0_C

Alistapart also had some articles on this:

[url]http://alistapart.com/articles/footers/

Maybe this one will work, I tested it in Opera 7, Mozilla and IE6 - and has no Javascript, just forget about IE5 :-)

[url]http://alistapart.com/d/footers/footer_css2.html

They are using the same trick as I.... with the difference they don´t need to position:absolute the content, so it works. On other layout i´ve made, it works too. But not in that case... and I don´t mind if I have to use JS on a page, but never to move elements all around.

You can, by reworking your code. Just think about this:

html { } should be used to set a background image, it stretches the full size of the page
body { } should not be used, because it stretches with content.

* Make a 16 colour optimized GIF (should only be around 50 bytes if you used that sort of background) (around 16 high, do not make it 1 high, it will be sluggish on some browsers to tile)
* set the 16 colour optimized GIF as the html { } background, repeat-y and centered horizontally
* rework your code, you might even be able to remove some DIVs using this method.

html {
  background: #CCC url('background.gif') repeat-y top center;
}

It should be easy enough like this, and produce smaller code, but ask me if you need more help

AnnevanKesteren: Thanks!, I´ve tried that, but changing the #holder position and size, and works perfectly!!!!

robvdl: But that doesn´t make my footer sits at the end of the page/screen...

Well, I played around, and only got it half working. I can get the footer to behave as expected without the left menu, but as soon as you introduct it, it won't do it no more.

You might just have to accept the fact that with CSS there is no more 100% height like you could do with tables. You will need to just grow your box with content. Surely this will produce a "shorter" page sometimes, but that is ok. I have done so with my page - just accepted the fact that you simple can'y do it anymore. So I just made sure my pages are all nice and high with lots of content.

The best way is to float all boxes, so you don't have to play around with margins.

In the process I also noticed you used left: 52px or top: 10px a bit, but the boxes weren't even absolutely or relatively positioned.

These things only work on absolute or relative positioning - not static positioning

This footer demo does exactly what everyone wants except in Opera. In Opera there is an added buffer space of some sort that pushes the footer beyond the lower viewport edge when content is short, and creates a rather broad gap between content and footer when the content is long.

I originally suspected uncollapsed vertical margins, but that seems not to be the case.

Scott's method is elegant and I will continue to use it in spite of Opera's ugly rendering. I would like to know what causes this ugliness and if possible apply some kind of fix/hack/work-around.

I would imagine that this bug(?) has expressed itself in other bits of code. Has anyone an explanation?

cheers,

gary

XHTCSSML

<div margin: auto; width: some;>
<ul width: 25%; float: left; />
<div width: 75%; float: left; />
<hr clear: left; />
footer
</div>

works for me, although IE quirks (see link posted by moose) make it bad solution for people with weak nerves.

OT: I've noticed that opera wraps text on that weird apostrophe: "´". Isn't that a bug? (7.60p1)

If the original question still stands...

The trick is to use the <body> as "the container".

marcelo1.html

marcelo2.html

Originally posted by porneL
OT: I've noticed that opera wraps text on that weird apostrophe: "´". Isn't that a bug? (7.60p1)

I wouldn't call that a bug.  It's a "grave accent" and not an apostrophe.  Actually, the "acute accent" (`) is used more often for that "weird apostrophe".

Originally posted by Tomcat76
If the original question still stands...

The trick is to use the <body> as "the container".

A-mazing. I would never have thought of using body as a positioned and sized container. Your(?) demo is quite elegant. I do have two questions, though.

• What keeps long content from under-running the AP footer? I'll create and play with my own minimal test case so that I may fully grok the nuances. I may yet figure that out.
  
• Is it known what causes the footer in Scott's code to be pushed beyond the viewport with short content or exhibit the large gap with long content? I can imagine this popping up in another context, and would like to know the trigger to this misbehavior.

Thanks again for the very nice solution and demo.

cheers,

gary

Originally posted by kk5st
What keeps long content from under-running the AP footer?

Uhh... AP footer?  Wait... I'm looking for my dictionary...

Is it known what causes the footer in Scott's code to be pushed beyond the viewport with short content or exhibit the large gap with long content?

It smells like a bug but I'm not sure.  You do got a bottom margin on #main; replace that with a bottom padding and you're almost good to go.  The next problem is that the stylesheet doesn't reduce the body's padding to 0, which is necessary for Opera (Mozilla has a default margin while Opera a default padding).

Thanks again for the very nice solution and demo.

No problemo.  It's a hobby...

But it's more like the outcome of playing with it for an hour and a half...

Originally posted by Tomcat76
Uhh... AP footer?  Wait... I'm looking for my dictionary...

Sorry. AP == Absolute Position

It smells like a bug but I'm not sure.  You do got a bottom margin on #main; replace that with a bottom padding and you're almost good to go.  The next problem is that the stylesheet doesn't reduce the body's padding to 0, which is necessary for Opera (Mozilla has a default margin while Opera a default padding).

I had already played with the padding and margin values (my own code starts with a template that sets padding and margin in both html and body to zero), and went about trying again with your suggestions in mind. There were small cosmetic variances, but nothing of any significance toward the problem.

As to smelling of bug, perhaps 'reeks of bugosity' is the operative phrase.

cheers,

gary

Said Tomcat76

No problemo

How does a Belgian speak Texian right down to the proper way to misspell and likely mispronounce the word 'problema'?

cheers,

gary

That's at least what fixes the demo page you linked to.  The padding for the body isn't set, and there's a bottom margin on #main.

Change

body {
margin: 0;
font-family: Arial, sans-serif;
}

to

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

and

#main {
margin-bottom: 5em;
height: auto;
padding: .5em;
}

to

#main {
height: auto;
padding: .5em .5em 5em;
}

Note: that's 5em at the end, not "point 5".

Originally posted by kk5st

No problemo

How does a Belgian speak Texian right down to the proper way to misspell and likely mispronounce the word 'problema'?

Guess I ain't shaped for them foreign words... Mas problemas... We'll call it a case of double Dutch...