homepage Welcome to WebmasterWorld Guest from 54.234.141.47
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Forcing content to the bottom (footer) of the browser
madmartigan

5+ Year Member



 
Msg#: 3635051 posted 2:32 pm on Apr 25, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3635051 posted 3:33 pm on Apr 25, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3635051 posted 4:24 pm on Apr 25, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3635051 posted 4:25 pm on Apr 25, 2008 (gmt 0)

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+ Year Member



 
Msg#: 3635051 posted 5:21 pm on Apr 25, 2008 (gmt 0)

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

madmartigan

5+ Year Member



 
Msg#: 3635051 posted 5:47 pm on Apr 25, 2008 (gmt 0)

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

Thanks!

RedTCat

5+ Year Member



 
Msg#: 3635051 posted 8:13 pm on Apr 25, 2008 (gmt 0)

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

* html #mainwraper { height: 100% }

madmartigan

5+ Year Member



 
Msg#: 3635051 posted 8:47 pm on Apr 25, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3635051 posted 9:25 pm on Apr 25, 2008 (gmt 0)

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

* html #mainwraper { height: 100% }

madmartigan

5+ Year Member



 
Msg#: 3635051 posted 9:44 pm on Apr 25, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3635051 posted 9:47 pm on Apr 25, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3635051 posted 9:49 pm on Apr 25, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3635051 posted 11:26 pm on Apr 25, 2008 (gmt 0)

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

madmartigan

5+ Year Member



 
Msg#: 3635051 posted 12:04 am on Apr 26, 2008 (gmt 0)

Looks good! Thanks!

swa66

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



 
Msg#: 3635051 posted 2:26 am on Apr 26, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3635051 posted 9:41 pm on Apr 26, 2008 (gmt 0)

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

madmartigan

5+ Year Member



 
Msg#: 3635051 posted 10:35 pm on Apr 26, 2008 (gmt 0)

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

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



 
Msg#: 3635051 posted 3:52 am on Apr 27, 2008 (gmt 0)

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+ Year Member



 
Msg#: 3635051 posted 5:29 am on Apr 27, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved