STICKY FOOTER WON'T WORK

I just had a solution from another question on here a few days ago about a different website, so I took that solution (that works) and tried to replicate it on a new website and it doesn't work on the new site.

I need the child divs inside my BG div to be absolute positioned in order for the layout to visually work and do not want to use fixed position for any elements because it needs to be dynamic for diff screen resolutions.  I'm using mostly % width and height for all divs to ensure they expand and contract with screen sizes and have made sure the content inside is able to do the same.

So, no matter how I try different sticky footer code, it will not make the footer stick. I'm NOT interested in a Javascript solution since I know CSS can and does work.  I just don't know what's wrong with my code that is making it not work.

I'm posting the CSS and also my HTML layout.

CSS
html, body {
	background-color: #ccc;
	margin: 0;
	padding: 0;
	height:100%;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#wrap {
	min-height:100%;
}
/* IMPORTANT*/
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

#main {
	padding-bottom: 75px;
	overflow:auto;
}
.header {
	background-color: #000;
	height: 50px;
	width: 100%;
	border-bottom: #ffea00 solid 3px;
	position:absolute;
	margin-top:0px;
	top:0px;
	z-index:800;
}
.bg {
	width:100%;
	border-bottom:solid 15px #ffea00;
	position:absolute;
	margin:0 auto;
	z-index:25;
	top:50px;
}
.bgimg {
	width:100%;
	height:auto;
	z-index:-100;
	display:block;
}
.divrt {
	right:0px;
	height: 76%;
	border: 1px #ccc solid;
	width: 4.85%;/*removes the browser scrollbar on bottom by not being a perfect 100% combined width*/
	border-radius: 15px 0 0 15px;
	position: absolute;
	left: 95%;
	top: 12%;
	z-index:300;
	}
.divrtBKG {
	right:0px;
	height: 76%;
	background-image:url(../../images/transbkg.png);
	background-repeat:repeat;
	border: 1px #ccc solid;
	width: 4.85%;/*removes the browser scrollbar on bottom by not being a perfect 100% combined width*/
	border-radius: 15px 0 0 15px;
	position: absolute;
	left: 95%;
	top: 12%;
	opacity:.40;
	filter: alpha(opacity=40);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	z-index:250;
	}
.divlft { 
	float: left;
	width:7.5%;
	border-right:#ffea00 3px solid;
	border-bottom:#ffea00 3px solid;
	margin:0;
	position:relative;
	top:0;
	z-index:801;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
}
.content {
	width:45%;
	left:5%;
	top:23%;
	border-radius:15px;
	border:#ccc 1px solid;
	height:150%;
	z-index:300;
	padding:10px;
	position:absolute;
}
.contentBKG {
	width:45%;
	left:5%;
	top:23%;
	border-radius:15px;
	border:#ccc 1px solid;
	background-image:url(../../images/transbkg.png);
	background-repeat:repeat;
	position:absolute;
	height:150%;
	z-index:250;
	padding:10px;
	opacity:.40;
	filter: alpha(opacity=40);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

.footer {
	position: relative;
	margin-top: -75px;  /*negative value of footer height */
	height: 75px;
	clear:both;
	background-color:#004080;
	width:100%;
}

Open in new window


HTML

<BODY>
<DIV id="wrap">
<DIV id="main">
    <DIV class="header"><!-- AddThis Button BEGIN -->
    <DIV class="addthis_toolbox addthis_default_style" align="center" style="padding-left:82%; padding-top:15px;">
    <div style="font-family:Verdana, Geneva, sans-serif; font-size:x-small; color:white; float:left">share:</div> <A class="addthis_button_preferred_1"></A>
    <A class="addthis_button_preferred_2"></A>
    <A class="addthis_button_preferred_3"></A>
    <A class="addthis_button_preferred_4"></A>
    <A class="addthis_button_compact"></A>
    <A class="addthis_counter addthis_bubble_style"></A>
    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-503e84a42ef08444"></script>
    <!-- AddThis Button END -->
    </DIV>
	</DIV>

	<DIV class="divlft">
	<IMG src="images/spencerKaneLogo.png" alt="Spencer Kane Official Website" class="bgimg">
	</DIV>
    <DIV class="bg">
    <IMG src="images/bkg.jpg" alt="Spencer Kane Music" class="bgimg">
        <DIV class="content"><cfinclude template="includes/slideshow/slidenews1.cfm">
        <iframe src='http://www.reverbnation.com/widget_code/html_widget/artist_1516225?widget_id=50&posted_by=artist_1516225&pwc[design]=customized&pwc[background_color]=%23ffea00&pwc[included_songs]=1&pwc[photo]=0&pwc[size]=fit' width='100%' height='135' class='widget_iframe' frameborder='0' scrolling='no'></iframe>
        </DIV>
    	<DIV class="contentBKG"></DIV>
        <DIV class="divrt"><cfinclude template="includes/home-social-media-links.cfm"></DIV>
        <DIV class="divrtBKG"></DIV>
    </DIV>
</DIV>
</DIV>
<DIV class="footer"><P>Footer</P></DIV>
</BODY>

Open in new window


Here's the page in development:
http://www.spencerkanemusic.com/newsite/index.cfm

Please help!
LVL 1
day6Asked:
Who is Participating?
 
Frederic SuneCEO, IT in MIND inc.Commented:
The problem is your .content and .contentBKG div class. You put a height of 150% and it's good over your footer. Maybe your can make a div with a clear:both and also on your div footer put a position:absolute.
0
 
Frederic SuneCEO, IT in MIND inc.Commented:
Try this:

#bottom_bar {
    background: url("../img/footer_bg.png") repeat-x scroll center bottom #0C0C0C;
    bottom: 0;
    height: 30px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

You can see an example here: Club Altitude - The site is in french but you can see the footer
0
 
day6Author Commented:
position fixed does not allow the footer to move down below the page content, it always stays at the bottom of the browser window and the content of the page flows beyond it. The goal is to have a footer that moves down "with" the content, but is anchored in the bottom of the html page. That's the essence of a sticky footer.

Even this Experts Exchange page has a sticky footer. If you scroll past these comments to the bottom, the footer is there. As the comments get longer than the viewport, the footer still stays at the bottom of the page. When the comments or content is shorter than the viewport, the footer is in view.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Frederic SuneCEO, IT in MIND inc.Commented:
So it's just a basic footer with a width at 100%. I am not sure what you try to achieve..
0
 
day6Author Commented:
did u look at the page example? The footer is showing up in the middle of the page when you scroll down to see all the content. The footer should be at the bottom of the page.
0
 
day6Author Commented:
The 150% height had no bearing on the footer sticking where it should stick. I reduced it to 70% height and added another div below the BG div for more content, and the footer still raised up to the middle.
0
 
Frederic SuneCEO, IT in MIND inc.Commented:
I checked with Chrome under windows 7 and your footer is stick at the bottom...
0
 
day6Author Commented:
this was not the solution I wanted. It, of course, explained odd behavior, but when I'm trying to build a truly dynamic site, I want to be able to use PERCENTAGE widths and heights instead of fixed pixels. The 150% was needed to allow my content inside that div to drop below, but it only caused the footer to rise up.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.