Forum Moderators: not2easy
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! :)
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>
<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>
Thanks!
* html #mainwraper { height: 100% }
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>
* html #mainwraper { height: 100% }
Thanks for all the help.
<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>
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.
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!
* 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.
Do you have an example of a conditional solution that accomplishes what I outlined in my original post? That would be very helpful.
