Positioning Footer at the Bottom of Website Page - html

Question

I'm trying to make this template, which I'm going to later be converting into a WordPress theme. The problem I'm having is similar to this post: Make div stay at bottom of page's content all the time even when there are scrollbars But when I tried the solutions off of that post, but didn't work for me.
What I want to have is the footer be at the very bottom of the page (hidden from view if the content is longer than the viewer's browser window) and not have it fixed on the bottom of the window.
All of the top content (the navigation, bars, logo, etc.) is positioned where I would like it to be. But the link above the footer and the footer aren't positioned at the very bottom of the page. Instead, when it first loads up, it positions itself at the bottom of the page. The more content it has, it stays in the area where it first loaded. See the screenshot below:
Here is the following HTML/CSS for the page:
HTML
<div id="blackbar"></div>
<div id="wrapper">
<div id="redbar">
<img src="images/logo_broeren_03.png" alt="" title="" />
</div>
<div id="navigationWrapper">
<ul>
<li>Contact Us</li>
<li>Who We Are</li>
<li>Our Portfolio</li>
<li>Home</li>
</ul>
<div id="whitebar">
<img src="images/logo_broeren_04.png" alt="" title="" />
</div>
</div>
<div id="newsbar">
</div>
<div id="contentWrapper">
<div id="secondaryNavigation">
</div>
<div id="slider-headline">
</div>
<div id="content">
<div class="post">
<p>Contains post content</p>
</div>
</div>
</div>
</div>
<div id="footer">
<span id="studioLink">designed by Two Eleven Studios</span>
<ul>
<li>602 N. Country Fair Drive, P.O. Box 6537 • Champaign, Illinois 61826–6537</li>
<li>217–352–4232</li>
<li>example#broerenrusso.com</li>
<li>© 2012 Broeren Russo Inc.</li>
</ul>
</div>
CSS
/*General Implementations*/
body {
background: #6CF;
width: 100%;
}
/*Main Elements*/
/*Black bar on the far left side*/
#blackbar {
background: #000;
height: 55px;
position: absolute;
top: 25px;
/*width: 155px;*/
width: 15%;
}
/*Red bar containing red part image of logo*/
#redbar {
background: #C0272D;
width: 114px;
height: 80px;
float: left;
}
#redbar img {
float: right;
position: relative;
top: 24px;
}
/*Wrapper containing main content, navigation, white bar w/ logo, news feed, and main content*/
#wrapper {
width: 798px;
height: 100%;
float: left;
position: absolute;
left: 15%;
/*left: 155px;*/
}
/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper {
width: 570px;
height: 130px;
position: relative;
top: 0;
float: left;
font-size: 12px;
font-family: 'RobotoLight', Arial, sans-serif;
text-transform: uppercase;
}
/*Main navigation settings*/
#navigationWrapper ul {
/*position: relative;
top: 0;
float: right;*/
height: 24px;
width: 570px;
}
#navigationWrapper ul li {
display: inline-block;
width: 114px;
/*height: 22px;*/
text-align: right;
float: right;
padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover {
border-top: 2px #C0272D solid;
padding: 1px 0 0 0;
}
#navigationWrapper ul li a {
position: relative;
top: 10px;
color: #000;
text-decoration: none;
}
/*White bar w/ white logo*/
#whitebar {
background: #FFF;
height: 56px;
width: 570px;
position: relative;
top: 0px;
}
#whitebar img {
float: left;
position: absolute;
}
/*News feed on the side*/
#newsbar {
width: 114px;
height: 179px;
background: #FFF;
margin: 80px 0 0 0;
}
/*Slider/Headline Block and content block*/
#slider-headline, #content {
width: 684px;
}
/*Slider/Headline Block*/
#slider-headline {
background: #000;
height: 302px;
}
/*content block*/
#content {
background: #FFF;
padding: 6.5em 0 1em 0;
margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper {
width: 684px;
margin: -179px 0 24px 114px;
}
/*Company tagline (only on index page)*/
#companyTagline {
float: right;
font-family: 'RobotoMedium', Arial, sans-serif;
margin: 5px 0 0 0;
}
/*Secondary navigation within contentWrapper*/
#secondaryNavigation {
width: 611px;
height: 110px;
margin: 0 auto;
position: absolute;
background: #666;
z-index: 10;
top: 320px;
right: 44px;
}
/*Post settings*/
.post {
width: 89%;
margin: 0 auto;
}
/*Studio link*/
#studioLink {
position: absolute;
bottom: 27px;
left: 3px;
font: 8px 'RobotoLight', Arial, sans-serif;
}
/*Main footer*/
#footer {
position: absolute;
bottom: 0;
width: 100%;
background: #CCC;
height: 24px;
}
#footer ul {
width: 684px;
margin: 0 auto;
}
#footer ul li {
list-style-image: none;
display: inline-block;
font: 9px/11px 'RobotoLight', Arial, sans-serif;
margin: 0 23px 0 0;
}
#footer ul li:last { margin: 0; }
I know part of the problem is all of the top content (navigation, white bar on top, etc.) have the position: absolute; CSS within them. But I wanted to keep this CSS declaration. How do I have it so the link above the footer and the footer itself positioned at the bottom of the page/content and not positioned at the bottom of the window?

Answer 1

So here it is. It took a long time because of absolute positioning
<body>
<div style="width:100%; min-height: 100%; position: relative; display:inline-block;">
<div id="blackbar">
</div>
<div id="wrapper">
<div id="redbar">
<img src="images/logo_broeren_03.png" alt="" title="" />
</div>
<div id="navigationWrapper">
<ul>
<li>Contact Us</li>
<li>Who We Are</li>
<li>Our Portfolio</li>
<li>Home</li>
</ul>
<div id="whitebar">
<img src="images/logo_broeren_04.png" alt="" title="" />
</div>
</div>
<div id="newsbar">
</div>
<div id="contentWrapper">
<div id="secondaryNavigation">
</div>
<div id="slider-headline">
</div>
<div id="content">
<div class="post">
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
</div>
</div>
</div>
</div>
<div id="footer">
<span id="studioLink">designed by Two Eleven Studios</span>
<ul>
<li>602 N. Country Fair Drive, P.O. Box 6537 Champaign, Illinois 618266537</li>
<li>2173524232</li>
<li>example#broerenrusso.com</li>
<li> 2012 Broeren Russo Inc.</li>
</ul>
</div>
</div>
</body>
​
css
<style type="text/css">
/*General Implementations*/
html, body
{
background: #6CF;
width: 100%;
height: 100%;
}
/*Main Elements*/
/*Black bar on the far left side*/
#blackbar
{
background: #000;
height: 55px;
position: absolute;
top: 25px; /*width: 155px;*/
width: 15%;
}
/*Red bar containing red part image of logo*/
#redbar
{
background: #C0272D;
width: 114px;
height: 80px;
float: left;
}
#redbar img
{
float: right;
position: relative;
top: 24px;
}
/*Wrapper containing main content, navigation, white bar w/ logo, news feed, and main content*/
#wrapper
{
width: 798px;
min-height: 100%;
float: left;
position: relative;
left: 15%; /*left: 155px;*/
}
/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper
{
width: 570px;
height: 130px;
position: relative;
top: 0;
float: left;
font-size: 12px;
font-family: 'RobotoLight' , Arial, sans-serif;
text-transform: uppercase;
}
/*Main navigation settings*/
#navigationWrapper ul
{
/*position: relative;
top: 0;
float: right;*/
height: 24px;
width: 570px;
}
#navigationWrapper ul li
{
display: inline-block;
width: 114px; /*height: 22px;*/
text-align: right;
float: right;
padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover
{
border-top: 2px #C0272D solid;
padding: 1px 0 0 0;
}
#navigationWrapper ul li a
{
position: relative;
top: 10px;
color: #000;
text-decoration: none;
}
/*White bar w/ white logo*/
#whitebar
{
background: #FFF;
height: 56px;
width: 570px;
position: relative;
top: 0px;
}
#whitebar img
{
float: left;
position: absolute;
}
/*News feed on the side*/
#newsbar
{
width: 114px;
height: 179px;
background: #FFF;
margin: 80px 0 0 0;
}
/*Slider/Headline Block and content block*/
#slider-headline, #content
{
width: 684px;
}
/*Slider/Headline Block*/
#slider-headline
{
background: #000;
height: 302px;
}
/*content block*/
#content
{
background: #FFF;
padding: 6.5em 0 1em 0;
margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper
{
width: 684px;
margin: -179px 0 24px 114px;
}
/*Company tagline (only on index page)*/
#companyTagline
{
float: right;
font-family: 'RobotoMedium' , Arial, sans-serif;
margin: 5px 0 0 0;
}
/*Secondary navigation within contentWrapper*/
#secondaryNavigation
{
width: 611px;
height: 110px;
margin: 0 auto;
position: absolute;
background: #666;
z-index: 10;
top: 320px;
right: 44px;
}
/*Post settings*/
.post
{
width: 89%;
margin: 0 auto;
}
/*Studio link*/
#studioLink
{
position: absolute;
bottom: 27px;
left: 3px;
font: 8px 'RobotoLight' , Arial, sans-serif;
}
/*Main footer*/
#footer
{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
background: #CCC;
height: 24px;
}
#footer ul
{
width: 684px;
margin: 0 auto;
}
#footer ul li
{
list-style-image: none;
display: inline-block;
font: 9px/11px 'RobotoLight' , Arial, sans-serif;
margin: 0 23px 0 0;
}
#footer ul li:last
{
margin: 0;
}
</style>
Here is the fiddle. Working perfect for me. Checked in Chrome and Firefox.

Answer 2

Try this formula. in hurry
<div class="header">
</div>
<div id="Content">
<div class="con"></div>
</div>
<div class="header">
</div>
css
html, body
{
height: 99%;
background-color:Black;
}
.header ,.footer
{
width: 960px;
height: 15%;
background-color:Gray;
}
#Content
{
min-height: 85%;
width: 960px;
background-color:Navy;
}
.con
{
min-height:900px;
width:960px;
background-color:Aqua;
}​
fiddle here

Answer 3

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
HTML
<div class="wrapper">
<p>http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright © 2008</p>
</div>
CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /*!*/
}
.footer, .push {
height: 4em; /*!*/
clear: both;
}

Answer 4

Set the body to height: 100%; and overflow: auto;
Set the footer to position: fixed;, bottom: 0; and left: 0;
Then you must only set the margin-bottom of your content to the height of your footer.

Answer 5

Change the position of the footer from absolute to fixed:
#footer {
position: fixed;
...
}