asked on

Sticky footer help

Hi,

I'm trying to implement a sticky footer as suggested here http://www.cssstickyfooter.com/using-sticky-footer-code.html

I did everything as suggested - did html, body height:100% , set #wrap min-height:100%, set #content(#main in example link, #content in my case) to overflow:auto; padding-bottom:150px;

set #footer properties as suggested.. also moved the #footer div out of #wrap as suggested.

The only thing in the css file i'm attaching along i did not change is margin-top; margin-bottom ; to padding-top; padding-bottom; as suggested (i've checked after changing these as well on local system but no difference) .

The footer now appears at the bottom of the browser window, however not at the bottom of the page/content... see here http://tinyurl.com/eehelp .

Hope someone can help me to fix this so that the footer sticks to the bottom for everything.

Attaching index.php(template page) and css style sheet.

Index.php




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



<html lang="<?php echo $langx['lang']; ?>">




<head>
<title><?php echo $page_title; ?></title>
<base href="<?php echo $script_url; ?>"/>     



<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $langx['charset']; ?>">
<meta name="keywords" content="<?php echo $meta_keywords; ?>">
<meta name="description" content="<?php echo $meta_description; ?>">



<link rel="stylesheet" type="text/css" href="<?php echo $script_url; ?>/style.css"> 
<link rel="stylesheet" type="text/css" href="<?php echo $script_url; ?>/style2.css"/>





<link rel="alternate" type="application/rss+xml" title="<?php echo rssTitle("", ""); ?>" 
	href="<?php echo "{$script_url}/{$global_rssurl}"; ?>">




<?php if (!empty($rssurl)) { ?>
<link rel="alternate" type="application/rss+xml" title="<?php echo rssTitle(($xsubcatname?$xsubcatname:$xcatname), ($xcityname?$xcityname:"")); ?>" 
	href="<?php echo "{$script_url}/{$rssurl}"; ?>">
<?php } ?>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>


<script language="javascript">
	function setLeftRightBar()
	{
		var height2 = document.getElementById('left_2').offsetHeight;
		var height3 = document.getElementById('left_3').offsetHeight;
		var height4 = document.getElementById('left_4').offsetHeight;
		var height5 = document.getElementById('left_5').offsetHeight;
		
		var height = Math.max(height2,height3,height4,height5) + 60;
		document.getElementById('left_1').style.height = height+'px';
		document.getElementById('left_6').style.height = height+'px';
	}
</script>

</head>

<body onload="setLeftRightBar()">






<div id="wrap">
		
      <div id="header">
			


	<?php include("header.php"); ?>



 <div id="bar"> 

<div id="menuholder">
                <div id="menu">



<a href="index.php?cityid=0"><?php echo $lang['HOME_LINK']; ?></a> &nbsp; |  &nbsp;
			
			<a href="<?php echo $postlink; ?>"><?php echo $lang['POST_LINK']; ?></a> &nbsp; |  &nbsp;



<?php if($auth->id) { ?>



 <a href="index.php?view=myaccount" title="">My Account</a>&nbsp; |  &nbsp;
				<a href="index.php?view=bookmarks" title="">Watch List</a> &nbsp;|  &nbsp;
				
				<a href="index.php?view=login&amp;logout" title="">Logout</a>  &nbsp;

				<?php }else{ ?>
				<a href="index.php?view=login" title="">Login</a> &nbsp; |  &nbsp;
				<a href="index.php?view=register" title="">Sign up</a>


<?php } ?>
	






</div>

</div></div>
		
	</div>


			

               <div id="content">
			
	            <div id="left_content"> <?php include('left_sidebar.php'); ?> </div>


                    <div id="main_content">	
		
		
		         <?php include("path.inc.php"); ?> 

                         <div style="display:none;"><?php echo "<!--#&88;#&90;#&101;#&114;#&111;".
                         "#&83;#&99;#&114;#&105;#&112;#&116;#&115;#&46;#&99;#&111;#&109;-->"; ?></div>
        
		        <?php echo $content;unset($content);?>
			
         	   </div>

		
		
		<div id="right_content"> 
		
		<?php
			if($xview != "post" && $xview != "postimg")
			{
			?>

           
           
		<div class="right_top" align="center"><?php echo $lang['SEARCH']; ?> <?php include("search.inc.php"); ?> </div>
		
		<?php
			}
			?>

               </div>
	
         </div>



<div style="clear:both" ></div>
<div style="clear:both" ></div>

</div>
		
		<div id="footer" align="center"> 
		
		<div  class="footer_menu">
    <li><a href="about.php">About us</a></li> <li>|</li>
	<li><a href="terms.php"><?php echo $lang['TERMS_OF_USE']; ?></a></li><li>|</li> 
	<li><a href="privacy.php"><?php echo $lang['PRIVACY_POLICY']; ?></a></li><li>|</li> 
	<li><a href="contact.php">Contact us</a></li> <li>|</li>
	</div>
	
	<div  class="footer_menu2">
	<strong>Copyright &copy; 2011 <?php if(($y=date("Y")) != 2011) echo "- $y"; ?> -  <?php echo $site_name; ?>  </strong>
	</div>  
	




</div>	






</body>
</html>

Open in new window

Style2.css





html {	height:100%;-webkit-text-size-adjust: 70%;	}
body {	height:100%;margin:0px;	padding:0px;font-family:Arial, Helvetica, sans-serif;  }
b			{ font-size:14px;}
#wrap { width:100%; height:100%; min-width:800px; min-height:100%; max-width:1600px; max-height:1200px; background-color:#FFFFFF; padding: 0;}

#header {
	padding:0 ;
	
	height:250px;
}


    #logo{
/*                notch below*/
                margin-top: 25px;
                width:20%;
                height:10px;
/*                background-image: url('logo.gif');
                background-repeat: no-repeat;
un-rem this*/
                   background-color: white;
                   float:left;
                   font-size: 14px;
	               font-weight: bold;
            }
            
            
            

#logo a {
	color: black;
	text-decoration: none;
}

#logo a:hover {
	color: #DF971E;
	text-decoration: none;
}
            
            
            
            #bar{   
                height:25px;
                width:30%;
                min-width:360px;
                background-color:#cccccc;
                padding-top:0;
                
            }


           #menuholder, #bar{
                float:right;
            }
            #menu{
                width:auto;
                
                margin-right:15px;
            }




/* #menu { width:100%; height:2.2em; margin-top:1%;  background:#80b2e4; border-radius:10px; -moz-border-radius:10px; -webkit-moz-border-radius:10px;} 

.top_menu_left	{float:left; width:86%;height:35px; margin-left:3%;}

.top_menu_left li a 	{ color:#fff !important; }

.top_menu_left li a:hover 	{ color:#336699 !important; }



.top_menu_right {float:right; width:17%;;height:1.2em;}

li{list-style:none; float:left;  color:#74677E;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif; text-align:left; padding:0 5px; margin-top:9px; color:#fff;}



.top_menu_left li {padding-right:1%; color:#fff;}

.top_menu_right li {padding-right:5%; color:#fff;}

*/


#searchbar { width:100%; height:auto;margin-top:20%;}

#top_search {width:100%; height:auto;}
#bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}

.sarch_box { width:10%; height:auto; float:left; margin-left:1%;font-size:75%;}

.box_1 { width:20%; height:auto; float:left;font-size:85%;}
.box_1 input { width:80%; height:1.2em;font-size:85%;}
.box_1 select { width:70%; height:1.5em;font-size:85%;}

.box_2 {width:2%; height:auto; float:left;}

#content { width:90%; min-width:790px; height:auto; margin-left:10%; margin-top:0px; overflow:auto; padding-bottom: 150px; }
#left_content { width:0%; min-width:0px;height:auto; float:left; }
#left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-bottom:1%;padding-left:5%;background-color:#A5D959;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-family:Arial, Helvetica, sans-serif;font-size:75%;}

#main_content { width:59%; min-width:600px;height:auto;float:left;  }
.main_content_header	{margin-left:2%;color:#BB532E;font-size:100%;font-family:Arial, Helvetica, sans-serif;font-weight:bold;margin-bottom:5%;}

.content_header {width:70%; height:auto; margin-left:3%;}

/*.left_1 {margin-left:2%;width:.05em; height:100px;background-image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left;padding-left:2px; }*/
.left_1 {margin-left:2%;width:.05em; height:100px;background-image:none;background-repeat:repeat-y;float:left;padding-left:2px; }
/*.left_6 { width:.05em;height:100px;background-image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left; }*/
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat-y;float:left; }

.left_content_middle	{width:95%; min-width:550px;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif;  border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px} <!-- background:#ECF5F4; -->

.content_title {padding:2%; text-align:center; color:#BB532E;font-weight:bold;font-size:95%;font-family:Arial, Helvetica, sans-serif; }

.content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}

.left_2 { margin-left:3%; width:21.5%; min-width:130px;height:auto; float:left; }
.left_3 { width:23.5%;height:auto;float:left;}
.left_4 { width:23.5%;height:auto;float:left;}
.left_5 { width:23.5%;height:auto;float:left;}


#right_content { width:20%;min-width:150px;height:auto; float:left;margin-left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}<!-- background-color:#ECF5F4; -->
.right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}

.Left_portion { width:45%; height:auto; float:left;padding-left:8%;}

.right_portion { width:45%; height:auto; float:left;}

.right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial, Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
.right_content_body	{color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}



.menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}

.gap {width:35%;}


#footer	{width:100%;margin:auto;text-align:center;background-color: #3399ff; line-height:40px; color:white; position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;}

.footer_menu {
    color: white;
    height: 1.2em;
}
.footer_menu2 {
    
    
    color:gray;
    
    font-size: 13px;
    margin-top: 21px;
    width: 100%;
}

.footer_menu li {
    color: white;
    padding-right: 1%;
    display: inline;
}



.footer_menu li a	{ color:#fff; text-decoration:none;}

.footer_menu li a:hover { text-decoration:underline}


.footer_menu strong	{ font-weight:lighter; color:#666}


/*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*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

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

*/

Open in new window

Robert Granlund

Take out the Margin-top: entry in the css.

ee-itpro

ASKER

well that doesn't solve anything.

Robert Granlund

do you mean this:
#footer {
background-color: #3399FF;
bottom: 0;
clear: both;
color: white;
height: 150px;
line-height: 40px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
margin-top: -150px;

position: fixed;
bottom:0px;

text-align: center;
width: 100%;
}

judsonmusic

so you want the footer to always be visible?

Lukasz Chmielewski

What browser do you use ?

judsonmusic

iM building an example right now. Almost finished.

judsonmusic

here ya go: http://www.servicemysite.com/Examples/stickyFooter.html

I added a cool effect for you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery example nav menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
footerEffect = function(){
	
	
	$('#footer').fadeOut(500, function(){
		
		$('#footer').fadeIn()
		
	});
	
	
	
}
window.onscroll = footerEffect
</script>
<style>
#footer{
	
	position:fixed;
	bottom:0px;
	height:150px;
	background-color:blue;
	width:100%	
	
}
</style>
</head>

<body>
<div class="content">
</div>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<div id="footer">My Footer</div>

</body>
</html>

Open in new window

judsonmusic

You dont have to do the jquery stuff at all, I just added the effect because I love it.

ee-itpro

ASKER

well thanks judsonmusic.... i suppose would be better without the cool effect .. and yes always visible at the bottom.... So probably remove footerEffect=function and jquery library needs to be removed?

@Roads_Roads - tested it out on FF 3.6.24

@ rgranlund - first i removed margin-top from everywhere except the #footer... then i tried by removing it from there as well (although margin-top-150px; should be there for the footer to be placed at the bottom of content).. it didn't work

ee-itpro

ASKER

@judsonmusic - would this work for all browsers and all versions? The example link i provided is supposed to work for mostly all browsers/versions

judsonmusic

here is what you want then...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>example stickyFooter</title>
<style>
#footer{
	
	position:fixed;
	bottom:0px;
	height:150px;
	background-color:blue;
	width:100%	
	
}
</style>
</head>

<body>
<div class="content">
</div>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<div id="footer">My Footer</div>

</body>
</html>

Open in new window

judsonmusic

i have tested in CHROME, FF and SAFARI, I see no reason for it now to work in IE as well. May want to check 6 though.

SOLUTION

Robert Granlund

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ee-itpro

ASKER

hello judsonmusic, this one sticks to the bottom of the browser window, not to the bottom of page/content... when the content is larger than the wiondow height, it hides the content at the bottom of the window... it should actually be after the content ends... and in case where the content is quite thin .. say about half the window size the footer shouldn't move up half the window... it should still stick at the window bottom ..... it seems there is some miscommunication about what is meant by a sticky footer.... i didn't notice at the first examnple you provided that was hiding the numbers that were near the bottom of the window until i scrolled and they moved up.... maybe i was confused with the cool(hide) effect...

judsonmusic

The only thing you can do then is have an if condition that if content is less than page height place footer at bottom else place below content

ee-itpro

ASKER

@ rgranlund - it's the same as judsonmusic...

ee-itpro

ASKER

yes but that would be perhaps a javascript fix... the example link i provided is pure css but i'm having trouble incorporating that in my existing css code...

judsonmusic

Have you tried just using <HTML> instead of <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

judsonmusic

ill be honest, I think the javascript(jquery) way is going to be a little cleaner and use less thought. :) I always have the jquery library installed and ready to go as I use it for many other cool techniques. Check out www.mo2salon.com for example where I emulate flash techniques. CSS definitely lightens the browser load but is such a pain in my butt sometimes when trying to do these things and when I see the words table and height 100% in CSS, I get nauseous. If you would like to do it "my way" I will be glad to provide that code change on my example.

judsonmusic

check this out, click the make big and make small.

http://www.servicemysite.com/Examples/stickyFooter.html

I believe this is what you want. You can remove the make big and small function to implement.

ASKER CERTIFIED SOLUTION

SSupreme

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

judsonmusic

SSupreme:

How is your solution going to mimic what I did on my link? You are talking about widths and such but what about it is going to make the footer appear at the bottom of the window if the content is super short, or revert to relative positioning at the bottom of the content div if it is longer?

J

SSupreme

Question is:

Hope someone can help me to fix this so that the footer sticks to the bottom for everything.

bottom isn't a middle of page, see your result:

and no javascript required as ee-itpro stated, it's pure CSS
here is my result:

judsonmusic

What browser did you test that in?

judsonmusic

Why doesn't he just use clear both and position it relative if all he wants is for it to be at the bottom of the content. I'm confused.

SSupreme

If he would create semantic version of what I told him, I would tell what else he need to adjust.
For example he doesn't need max-height on wrap.
just stick <li> wherever you need, doesn't make any sense.

SOLUTION

judsonmusic

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ee-itpro

ASKER

A BIG THANK YOU to everyone out here trying to help me out with this. I'm just fixing another thing at the moment I'll try out your recommendations soon and see what works out and then get back to you.

ee-itpro

ASKER

Thanks all of you...