Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

STICKY FOOTER WILL NOT WORK

Posted on 2012-08-24
47
Medium Priority
?
518 Views
Last Modified: 2012-08-30
I have literally spent 2 solid days trying to get about 20 different sticky footer methods to work on my site and it will not work no matter what I do.

My CSS:
html, body {
	background-color:#411821;
	min-height:100%;
	margin:0;
	padding:0;
}
#bgimg {
	width: 100%;
	height: auto;
	left: 0px;
	top: 0px;
	z-index:1;
	/* this tells the bkg layer to allow divs overlaid */
	position:relative;
	background-color: #bd8240;
}
#hdrtitle {
	width: 100%;
	height: auto;
	top: 25px;
	z-index:2;
	/* this tells the bkg layer to allow divs overlaid */
position:absolute;
}
#wrap {
	position:relative;
	margin:0 auto;
    width:100%;
	display:block;
	min-height:100%;
	height: auto !important;
	height:100%;
}
#header {
	width:100%;
	float:left;
	margin-top:70px;
	background-image:url(../../images/hdrmnubkg.png);
}
/* when using the STICKY FOOTER make sure it is OUTSIDE the container DIV and has a zero margin */
#footer {
	position:relative;
	height:90px;
	border-top:medium solid #bd8240;
	background-color:#bababa;
	width:100%;
	clear:both;
	}

Open in new window

The page is here:

http://www.restorationlutheran.com/Restoration-Lutheran-Church-Info.cfm?n1=who-we-are&n2=our-journey

It seems to work fine on my home page (click HOME on the nav menu) and you'll see it sits nicely at the bottom. But on this page, it floats up.

I'm not interested in FIXED position.

Any ideas?
0
Comment
Question by:day6
  • 22
  • 15
  • 10
47 Comments
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38332423
I think the problem is that there is not enough content on that page to push it down.

Why not make the footer position: absolute and bottom: 0 - should fix it
rl1.css [line 63]
background-color: #BABABA;
border-top: medium solid #BD8240;
bottom: 0; /* ADD THIS */
clear: both;
height: 90px;
position: absolute;  /* ADD THIS */
width: 100%;

Open in new window

0
 
LVL 1

Author Comment

by:day6
ID: 38332441
julian, it fixes the issue on the very little content page, but if you click HOME from the menu, it now messes up that page's footer
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38332469
Making your body position: relative will move the footer down to the bottom but then it will obscure the content that is there. A way around this is to include a div at the bottom of your content that is 90-100px high (depending on your space requirements).

So
html, body {
  background-color: #411821;
  margin: 0;
  min-height: 100%;
  padding: 0;
  position: relative; /* ADD THIS */
}
...
#footer {
  background-color: #BABABA;
  border-top: medium solid #BD8240;
  bottom: 0;
  clear: both;
  height: 90px;
  position: absolute;
  width: 100%;
}

Open in new window

HTML
<div id="wrap">
...
</div>
<div style="height: 90px" id="filler"></div>
<div id="footer">
</div>

Open in new window

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: 38332478
julian,

Now it broke the original page again by adding the position:relative; to the body tag. LOL
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38332487
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38332490
To migrate from what you have
1. Put a container around your whole page as shown in first code snippit
2. Style as per second code snippit
3. Remove additional div between wrap and footer as per first post (not needed)
<div id="container">
  <div id="wrap"></div>
  <div id="footer"></div>
</div>

Open in new window

Styles
html, body {
  background-color: #411821;
  margin: 0;
  height: 100%;  /* CHANGE THIS FROM min-height */
  padding: 0;
  position: relative;
}
/* SAME AS PREVIOUS POST */
#footer {
  background-color: #BABABA;
  border-top: medium solid #BD8240;
  bottom: 0;
  clear: both;
  height: 90px;
  position: absolute;
  width: 100%;
}
/* ADD THIS */
#container {
  height: auto !important;
  min-height: 100%;
}

Open in new window

0
 
LVL 1

Author Comment

by:day6
ID: 38332501
Julian,

It fixed the original page (again) but broke the home page. I've used that method in my 2 days of trying this and it didn't work then as it doesn't work now. I think you're seeing why I'm so frustrated. lol
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332509
Should it always be at the bottom of the screen regardless of content or only when there is not enough content to fill the screen?
0
 
LVL 1

Author Comment

by:day6
ID: 38332513
Gary,

Always at bottom when content is longer than viewport and when content is less than viewport, hence the STICKY FOOTER idea. I don't want fixed position. :)
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332528
Why not position:fixed?
That will do what you want - place the footer at the bottom of the browser window regardless of the content.
You are asking to do something in a way different from how every other website does it.
The only other way without fixed position is to give the viewport a fixed height but then that will just look stupid on different screen sizes.
0
 
LVL 1

Author Comment

by:day6
ID: 38332536
gary,

Fixed makes the footer visible and hides long content behind it. Every other website with a footer will always stay at the bottom of the page after all the content. The whole point of a sticky footer is to have a footer that anchors to the bottom of the viewport when the content is too short to fill the page, but move all the way to the bottom of the page when a person scrolls past all the content.

That's the goal of a sticky footer.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332539
You add a margin-bottom to your content (#wrap) equal to the hieght of the footer that way when you scroll you will see all the content.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332545
Hmm so you want it at the bottom of the content (not the viewport) when the page is longer than the viewport?
Confused by your comments.
0
 
LVL 1

Author Comment

by:day6
ID: 38332546
did nothing
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332552
To be clear
Do you want the footer always at the bottom of the viewport regardless of content
or
Only when there is not enough content - if this then check this link for a simple solution.
http://www.cssstickyfooter.com/
Unfortunately I'm going out for a while so do not have time to adapt your css, if you're still having trouble in an hour I will look through it.
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38332554
I would prefer a pure CSS solution but because you are dealing with variable content height where content can be < window height then looks like javascript needs to be brought in. This works for variable height content - what I don't like is that when you resize the window the bar footer does not move - which would require another js solution onresize to fix it.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#container').css({minHeight: $(window).height()-90});
});
</script>
<style type="text/css">
html, body {
  background-color: #411821;
  margin: 0;
  padding: 0;
  position: relative;
}
p { margin: 0;}
#footer {
  background-color: #BABABA;
  border-top: medium solid #BD8240;
  bottom: 0;
  clear: both;
  height: 90px;
  position: absolute;
  width: 100%;
}
#container {
  height: auto !important;
  min-height: 100%;
  padding-bottom: 90px;
}
</style>
</head>
<body>
<div id="container">
  <div id="wrap">
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here this is the final row</p>
  </div>
  <div id="footer">
    <div id="content" style="height: 90px">Footer goes here</div>
  </div>
</div>
</body>
</html>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 38332564
It is a css solution.
0
 
LVL 1

Author Comment

by:day6
ID: 38332569
gary,

tried that solution already. lol
0
 
LVL 1

Author Comment

by:day6
ID: 38332572
julian,

I really don't want to get into Javascript solutions.  I'm thinking that since a couple of your ideas worked on either page, maybe I should just create two classes for the footer so that the home page works fine and then the subpages have a different footer method that seemed to work. As long as I don't have to modify the BODY tag in the CSS sheet so that it blows up my home page, maybe I can create #footer1 and get the result or something.

It's really annoying that the same type content from the home page and pages thereafter can't just use the same footer. I really don't understand.
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38332573
@Gary - my post was made "after" my previous post - yours happened in between so my comment was referring to my previous post.

I get what day6 is after - put the footer at the bottom of the screen if there is insufficient content to push it there otherwise after the content.
0
 
LVL 1

Author Comment

by:day6
ID: 38332583
Well, creating the two separate classes works for now. I'll have to see what happens when the sub pages start filling up with content.

NOPE! That didn't work either.
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38332599
Did you try the sample I posted earlier - I tested with two pages of content and half a page and it was working here.

Styles were copied from your site and kept basic structure the same?
0
 
LVL 1

Author Comment

by:day6
ID: 38332653
doesn't work either
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38332668
Ok it works for me so if you want to explore further give me some idea of why / how it does not work?
How did you implement - what did you observer - finding it extremly difficult to work with "it doesn't work".
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332699
The link I posted does work but...
Your code is a bit of mess, you have mismatched divs causing the flow to break.
Remove the <DIV id="container">
and check all the other divs are matched up.

Place the css from the link in your head
Add <div id="main"> after <DIV id="wrap"> with a closing div before the footer div
And set the footer height in the css from 180 to 90 (all occurences)
I think thats all I changed.
0
 
LVL 1

Author Comment

by:day6
ID: 38332760
julian,

I assumed you looked at the links I provided earlier to see the results of the changes when I make them, thus being able to see the "it didn't work" results I posted.

http://www.restorationlutheran.com/
http://www.restorationlutheran.com/Restoration-Lutheran-Church-Info.cfm?n1=who-we-are&n2=our-journey
0
 
LVL 1

Author Comment

by:day6
ID: 38332764
Gary,

The #container div is part of the solution Julian has recommended. I'm not sure what your #main div is supposed to do since I don't see any code examples from you.

The CSS code from my style sheet is already in the linked style sheet rs1.css, so I'm not sure I understand why you would want me to duplicate it in the head.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332769
Try the changes I have posted...it works fine
Or attach your raw html code here and I'll make the changes.
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38332778
Ok - when I last looked it was as it had been originally.

The reason it is not working is because you did not add the javascript line. I stated in my post that a pure CSS solution was ideal but not practical given the functionality you wanted.
I would prefer a pure CSS solution but because you are dealing with variable content height where content can be < window height then looks like javascript needs to be brought in
You need to add this to your code to make the previous post work
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#container').css({minHeight: $(window).height()-90});
});
</script>

Open in new window

0
 
LVL 1

Author Comment

by:day6
ID: 38332818
Julian,

I'm not sure what you see, but that Javascript is in my HEAD tag on both pages. I added it when you posted the suggestion first time.
0
 
LVL 1

Author Comment

by:day6
ID: 38332823
Gary,

I have NO idea what you're talking about. What post did you make a code suggestion in?  The only posts I see are a recommendation to consider the cssstickyfooter website (which I've already used multiple times) and then a post asking me to add another DIV to my page and changing my footer height from 180px... which I've never had my footer at 180px.

I'm lost.

I'm all open to trying things, but not unless I see what you're talking about, and in this case, I have no idea.
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 38332837
Try the attached, I've just made a few changes and you will see when there is not enough content the footer is still at the bottom, when there is enough content the footer flows with the page.
But there is still a small margin at the bottom I cannot locate yet
day6.zip
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332854
Found it just amend the last block of css from
/* IMPORTANT
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

*/

Open in new window

to
/* IMPORTANT*/
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

Open in new window

0
 
LVL 1

Author Closing Comment

by:day6
ID: 38332883
Works and the footer height I changed to 175px since I know I'll be increasing it with the design at some point anyway. Good job.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332914
Some kudos to julianH for sticking with you
0
 
LVL 1

Author Comment

by:day6
ID: 38332919
Gary, would you care to take a stab at my other issue on this site?

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27841597.html
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38333932
@Garc thanks - yesterday not one of my best - apologies to all for wasting posts before reading / examining code.

Still not sure why solution I posted does not work
0
 
LVL 1

Author Comment

by:day6
ID: 38334112
julian, that's what was so frustrating to me. The logical solutions I tried over and over again kept failing for some reason. I have no idea why Gary's solution worked, but it did. lol
0
 
LVL 1

Author Comment

by:day6
ID: 38348129
GARY? Footer is not working on a brand new layout after using the EXACT code you provided for above. I am not able to get this to work.

http://spencerkanemusic.com/newsite/index.cfm
0
 
LVL 58

Expert Comment

by:Gary
ID: 38348160
Busy right now, but from a quick glance and if you are using the same css then <div id=main> should be immediately after the wrap div i.e. the header should be included in it and not seperate.
If still having problems then I will look tomorrow.
0
 
LVL 1

Author Comment

by:day6
ID: 38348225
HTML CODE

<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


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:absolute;
	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;
	position:absolute;
	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%;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 38348262
I'm really busy now but from a quick test your absolute positioning on nearly everything (????) is screwing the layout up.
For columnal (is that a word?) layout that is not what absolute positioning is for. Div's should flow with your design.

Edit
It is a word!!! http://www.columnal.com/
0
 
LVL 58

Expert Comment

by:Gary
ID: 38348286
p.s. Should be a seperate question.
0
 
LVL 1

Author Comment

by:day6
ID: 38348386
Absolute because i need the child divs to dynamically grow and shrink within the BG div becAuse i'm using % margins to ensure the child divs stay in the same spot when the screen is smaller. Relative doesnt work and i dont want fixed.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38348600
ummm there we go again with 'don't want fixed'. ;o) will have a look tomorrow at the code but removing the absolute from the css did fix the footer issue for me.
0
 
LVL 1

Author Comment

by:day6
ID: 38348694
Well if i dont use absolute, it breaks my layout... So thats the issue ive run into
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses
Course of the Month11 days, 18 hours left to enroll

564 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