Welcome to WebmasterWorld Guest from 50.19.156.19

Forum Moderators: not2easy

Message Too Old, No Replies

Forcing content to the bottom (footer) of the browser

     

madmartigan

2:32 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Good morning.

I'd be grateful if anyone can point me to a resource or provide an example of how to force content to the bottom of the browser, regardless of height. Meaning, if my main page content only takes up the top 50% of my browser's window (regardless of how expanded or not my browser window is), I want the content in question to be along the bottom edge, and not immediately below the content...

Thanks! :)

RedTCat

3:33 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Quick and dirty - If using CSS:

html { height: 100% }
body { height: 100% }
#main-wrapper { min-height: 100% }
#content-area { padding-bottom: 50px }
#footer { height: 50px }

<html>
<head>...</head>
<body>

<div id="#main-wrapper">

<!-- header, title, navigation, DIV's etc. here -->

<div id="#content-area">
<!-- page content here -->
</div>

<div id="#footer">
<!-- footer info here -->
</div>

</div>

</body>
</head>

madmartigan

4:24 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Thanks for the quick reply! However, it doesn't seem to do what I'm looking for. Content immediately follows header which is good, then footer appears 50px below content according to the 50px padding-bottom in content. Ideally, header and content work as I mentioned, then footer renders along the bottom edge of the browser window. I replaced your comments with the words "header, content, footer" respectively to see the output.

madmartigan

4:25 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Also - here's the code I'm testing. I made some minor tweaks to coincide with my style of CSS development:


<html>
<head>

<style type="text/css">

html { height: 100% }
body { height: 100% }
div#mainwrapper { min-height: 100% }
div#contentarea { padding-bottom: 50px }
div#footer { height: 50px }

</style>

</head>
<body>

<div id="mainwrapper">

header

<div id="contentarea">
content
</div>

<div id="footer">
footer
</div>

</div>

</body>
</head>

RedTCat

5:21 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Sorry, you need to add "position: absolute;" to #footer CSS

madmartigan

5:47 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Thanks again - but that didn't change anything. Did you try rendering it in your browser? Does it work?

Thanks!

RedTCat

8:13 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



ok, missed another bit of the CSS - I was in a hurry first time round!

* html #mainwraper { height: 100% }

madmartigan

8:47 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



That didn't do it either. Have you tested this before replying? Just curious.

Here's code so far per your instructions. I've tried several combinations. If you don't mind actually testing it in your browser that would be really helpful. I realize there are duplicate entries in the css block for mainwrapper - I tried it with and without and neither worked.

Thanks.


<html>
<head>

<style type="text/css">

html div#mainwrapper{ height: 100% }
body { height: 100% }
div#mainwrapper { min-height: 100% }
div#contentarea { padding-bottom: 50px }
div#footer { height: 50px; position:absolute; }

</style>

</head>
<body>

<div id="mainwrapper">

header

<div id="contentarea">
content
</div>

<div id="footer">
footer
</div>

</div>

</body>
</head>

RedTCat

9:25 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



yes, I did test it - that's how I fixed it ...
You missed the asterisk from:

* html #mainwraper { height: 100% }

madmartigan

9:44 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



The asterisk didn't fix it. I must be missing something obvious ... would you mind posting the exact code you have working?

Thanks for all the help.

madmartigan

9:47 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Actually I think I see this is working in that the "footer" div stretches to the bottom of the page. However, if you look at my code, what I'm looking for is the word "footer" to be at the bottom edge of the browser window, no matter how the browser is resized...

madmartigan

9:49 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Here's a post of the code with some added background colors for reference. What I'm looking for is the lighter gray footer div to be aligned to the bottom of the browser window.


<html>
<head>

<style type="text/css">

* html div#mainwrapper{ height: 100% }
body { height: 100% }
div#mainwrapper { min-height: 100%; background-color:#666; }
div#contentarea { padding-bottom: 50px; background-color: #999; }
div#footer { height: 50px; position:absolute; background-color:#ccc; }

</style>

</head>
<body>

<div id="mainwrapper">

header

<div id="contentarea">
content
</div>

<div id="footer">
footer
</div>

</div>

</body>
</head>

RedTCat

11:26 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Ok .. another typo! The last </DIV> (just above </BODY> ) should be before the <div id="footer">

madmartigan

12:04 am on Apr 26, 2008 (gmt 0)

5+ Year Member



Looks good! Thanks!

swa66

2:26 am on Apr 26, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I'd suggest much care with recommending hacks like "* html" without explaining why and what you're doing ... what browser needs to fix due to what reason ...

Honestly: I'd rather see conditional comments and no hacks at all, conditional comments are clear, and more future proof, and unlikely to trip a new browser that might come along and interpret what you tried to hide.

RedTCat

9:41 pm on Apr 26, 2008 (gmt 0)

5+ Year Member



I think anyone with a little thought can find that out for themselves - I did say it was quick and dirty ...

madmartigan

10:35 pm on Apr 26, 2008 (gmt 0)

5+ Year Member



What's the specific problem with the "hack"?

What's a more "acceptable" solution?

From everything I've read (not suggesting I've read everything), vertically centering div content isn't that straightforward and aspects of css like vertical-align:middle don't operate the same on all elements.

Thanks!

swa66

3:52 am on Apr 27, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



There's a problem with *all* hacks: they perpetuate the faulty and/or undefined behavior as it reinforces the crafters of browsers in continuing their errors. And if they don't all of a sudden a lot breaks.

* html something {...}: would select anything with a decendant that's html and then a decendant "something", since html is your outer element, it'll be up for grabs what browsers do in thinking of it as being a child of "anything".

The problem is that the number of browsers is continuously expanding (game consoles, phones, pdas, ....), who *can* test them all and know how all of them react to these "funny" selectors ?

It's IMHO a big problem in the long term, not so much in the short term.

The better solution is to use conditional comments to target the specific versions of IE, and stick to standards for the rest.

madmartigan

5:29 am on Apr 27, 2008 (gmt 0)

5+ Year Member



I'm aware of the risks of employing hacks, workarounds, etc. My interest was in why this specific "hack" was potentially deleterious, so thanks for answering that.

Do you have an example of a conditional solution that accomplishes what I outlined in my original post? That would be very helpful.