[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

STICKY FOOTER WON'T WORK

Posted on 2012-08-30
8
Medium Priority
?
421 Views
Last Modified: 2012-09-11
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!
0
Comment
Question by:day6
  • 4
  • 4
8 Comments
 
LVL 7

Expert Comment

by:Frederic Sune
ID: 38350175
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
 
LVL 1

Author Comment

by:day6
ID: 38350219
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
 
LVL 7

Expert Comment

by:Frederic Sune
ID: 38350555
So it's just a basic footer with a width at 100%. I am not sure what you try to achieve..
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 1

Author Comment

by:day6
ID: 38350567
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
 
LVL 7

Accepted Solution

by:
Frederic Sune earned 1000 total points
ID: 38350604
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
 
LVL 1

Author Comment

by:day6
ID: 38351895
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
 
LVL 7

Expert Comment

by:Frederic Sune
ID: 38352099
I checked with Chrome under windows 7 and your footer is stick at the bottom...
0
 
LVL 1

Author Closing Comment

by:day6
ID: 38388123
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question