Footer problem

sarb · September 13, 2011, 7:58pm

Hi,

Can anyone tell me why when I have a full page of text on my web page the footer stays nicely put at the bottom. But if I remove some text and there is only a small amount of content, the footer moves up and the left column extends down below it. This is driving me crazy…

Page can be seen here…

http://www.oaknoll.com/horizontal_menu_index.html

css code:


/* CSS Document */


html, body {
height: 100%;
}

body{
	background:#fff;
	margin: 0px;
	padding: 0px;
	font: 72%/1.6em Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: center;
}

a:link {
	color: #333399;
	text-decoration: none;
}

a:visited {
	color: #333399;
	text-decoration: none;
}

a:hover {
	color: #7c7ca5;
}


#container {
	position: relative;
	height: 100%;
	min-height: 100%;
  	width: 840px;
	margin: 0 auto;
	background: #fff;
	padding-right: 0;
	padding-left: 0;
	text-align: left;
	voice-family: "\\"}\\""; 
   voice-family:inherit;
	width: 840px;
}


/* page header  */

#pageHeader {
	margin-top: 15px;
	margin-bottom: 5px;
	background:#4b9695;
	border-bottom: 5px solid #ffffff;
	width: 840px;
	height: 70px;
	background-image: url(images/headerexperiment.gif) no-repeat;
}


#pageHeader h1 {
	
	
	margin: 0px;
	padding: 0px 0px;
}


#pageHeader h2 {
	float: right;
	margin: 0px;
	padding: 30px 30px 10px 0px;
	font: 2em Times, "Times New Roman", Times, serif;
	color: #ffffff;
	font-weight: 900;
	font-style:italic;
	
}


#pageHeader h3 {

padding: 5px 10px 0px 0px;
font: 72%/1.6em Verdana, Arial, Helvetica, sans-serif;	
color: #ffffff;
}


#pageHeader img {
	padding: 0px 0px;
}

#column2 {
	background: #b0c5c5;
	width: 612px;
	
}

/* presentation box details */

#presentationbox {
	float: right;
	background: #81b0a5;
	width: 612px;
    height: 325px;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	border-left: 3px solid #ffffff;
	}

#presentationbox .p1 {
	height: 325px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: #97a25e;
}

#presentationbox .p2 {
	height: 27px;
	background: #81b0a5;
	margin: 0 0 0 0;
	padding: 15px 0 10px 10px;
	vertical-align: bottom;
	voice-family: "\\"}\\""; 
  voice-family:inherit;
	height: 25px;
	color: #ffffff;
}



#presentationbox img {
	
	border: 3px solid #fff;
	margin-left: 5px;
	margin-top: 5px;
	
}


#column2_buttonbox {
	position: absolute;
	top: 89px;
	left: 630px;
	width:181px;
	height: 282px;
	background-image: url(images/special_buttons_on_background.jpg) no-repeat;
	padding: 0px 15px;
		
}

#column2_buttonbox img{
border: none;
}

/* Newsitem text */

#newsitem1 {
	margin: 100px 0 0 225px;
	background: #fff;
	padding: 100px 0 0 15px;
	border-left: 3px solid #ffffff;
}

#newsitem1 .p1 {
	margin: 8px 0 8px 0;
	background: #fff;
	padding: 8px 0 0 0;
	border-left: 3px solid #ffffff;
}

#newsitem1 h3 {
	background: url(about.gif) no-repeat;
  height: 19px;
	margin: 120px  0 0 0;
	padding: 100px 0 0 0;
	
}


/* supportingText  */

#supportingText {
	
	margin: 0 0 0 225px;
	background: #fff;
	border-left: 3px solid #ffffff;
	padding: 0 15px 1px 15px;
	
}

#newsitem2 h3 {
	background: url(about.gif) no-repeat;
  height: 19px;
	margin: 0px;
	padding: 0px;
}

#newsitem3 h3 {
	height: 15px;
}

#newsitem4 h3 {
	height: 18px;
}

#newsitem5 h3 {
	height: 15px;
}

#footer /*#newsitem5 .p5*/ {
	
    position: relative;
	margin: 0;
	padding: 0;
	text-align: right;
	height: 60px;
	width: 890px;
	background:#4b9695;
	border-bottom: 25px solid #ffffff;
}



/* linkList stuff */

#linkList {
		position: absolute;
		top: 78px;
	left: 2px;
	width: 220px;
	background: #d4dedc;
	
}

#linkList2 {
	padding: 15px 10px 10px 10px;
}

#navcap {
	position: absolute;
	top: 8px;
	left:11px
	
}

#nav_bottom {
	position: absolute;
	top: 350px;
	left:11px;
	
}


#ldirector {
	height: 240px;
	}

#ldirector p {
color: #4b9695;	
margin: 0 0 0 0;	
Font-weight: bold;
padding-top: 25px;

}



#ldirector h3 {
   height: 20px;
   padding: 5px 0 5px 10px;
   background: #4b9695;
   margin-top: 30px;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 1em;
}


#ldirector img {
	float: left;
	padding: 15px 5px 0 0;
}

#ladministrator {
height: 200px;	
margin-top: 50px;

}

#ladministrator p {
	width: 200px;
color: #4b9695;	
Font-weight: bold;
margin-top: 30px;
margin-left: 10px;
}

#ladministrator h3 {
	
height: 20px;
  padding: 5px 0 5px 10px;
   background: #4b9695;
   margin-top: 30px;
  color: #ffffff;
  text-transform: uppercase;
  font-size: .95em;
}


#ladministrator img {
	float: right;
	margin: 15px 8px 0 5px;
	border: 2px solid #ffffff;
}

/**slideshow**/

.slideshow {  
    height:  330px;  
    width:   432px;  
    padding: 0;  
    margin:  0;  
	overflow: hidden;
	}

 
.slideshow img {  
    padding: 5px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  400px; 
    height: 300px; 
    top:  0; 
    left: 0 
} 

#slideshow img { display: none }
#slideshow img.first { display: block }

.clearfooter {
height: 330px;
clear: both;
}

Thanks,
sarb

PaulOB · September 13, 2011, 8:43pm

HI,

The problem is that you have absolutely placed the sidebar (#linklist) and it is therefore removed from the flow and the footer will behave as if it doesn’t exist. That’s why you can’t use absolute positioning for structural elements like that because you can never account for them unless they are a fixed height which is to be avoided anyway.

You need to float the linklist and then create a container for the right column and float that also.

In the simplest form you would need this structure.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
	background:#fff;
	margin: 0 auto;
	position: relative;
	text-align: left;
	width: 840px;
}
#main {
	width:612px;
	float:right;
}
#linkList {
	float:left;
	margin:78px 0 0 2px;
	width: 220px;
	background: #d4dedc;
	display:inline;
}
#footer {
	position: relative;
	text-align: right;
	height: 60px;
	width: 890px;
	background:#4b9695;
	clear:both;
}
</style>
</head>

<body>
<div id="container">
		<div id="header">Header</div>
		<div id="main">All Right side main content elements go here</div>
		<div id="linklist">left column stuff goes here</div>
		<div id="footer">
				<p>This is the footer info</p>
		</div>
</div>
</body>
</html>

Remove the height:100% from your container because that will also stop it growing as the height will be capped at viewport height. Also remove all those silly voice family hacks as they were meant to hack for IE5 and you aren’t catering for it correctly anyway so remove them.

Your ie6 file is missing and your conditional comments are wrong.

They should be like this:


<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

You have called your left colum linklist and given the element a classname of menu_list yet you still continued to use divs instead of the “list” that the menu should have been. There is no need for the classes on every element in that column as nested lists would have allowed you to target all elements without using extra classes.

Hope that helps

dresden_phoenix · September 13, 2011, 9:05pm

phew… ‘gotta love’ those pre made templates…lol.
I had to make a few corrections. I fixed some things with your script comment and your conditional comments, also got amalgamated that clearing div for the footer (not needed). You had your container height set to 100%… and your footer set to position RELATIVE instead of absolute…

I would seriously reexamine the markup semantics… you menus should be based on ULs, I think your #pageheader DIV is extraneous and could be streamline further, there are a few other issues, but lets just solve the footer for now.

for your color.css:

html, body {
height: 100%;
}

body{
	background:#fff;
	margin: 0px;
	padding: 0px;
	font: 72%/1.6em Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: center;
}

a:link {
	color: #333399;
	text-decoration: none;
}

a:visited {
	color: #333399;
	text-decoration: none;
}

a:hover {
	color: #7c7ca5;
}


#container {
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	background: #fff;
	padding: 0 0 85px 0 ;
	text-align: left;
	voice-family: "\\"}\\""; 
   voice-family:inherit;
	width: 840px;
	overflow: hidden
}


/* page header  */

#pageHeader {
	margin-top: 15px;
	margin-bottom: 5px;
	background:#4b9695;
	border-bottom: 5px solid #ffffff;
	width: 840px;
	height: 70px;
	background-image: url(http://cdn.sitepoint.com/forums/images/headerexperiment.gif) no-repeat;
}


#pageHeader h1 {
	
	
	margin: 0px;
	padding: 0px 0px;
}


#pageHeader h2 {
	float: right;
	margin: 0px;
	padding: 30px 30px 10px 0px;
	font: 2em Times, "Times New Roman", Times, serif;
	color: #ffffff;
	font-weight: 900;
	font-style:italic;
	
}


#pageHeader h3 {

padding: 5px 10px 0px 0px;
font: 72%/1.6em Verdana, Arial, Helvetica, sans-serif;	
color: #ffffff;
}


#pageHeader img {
	padding: 0px 0px;
}

#column2 {
	background: #b0c5c5;
	width: 612px;
	
}

/* presentation box details */

#presentationbox {
	float: right;
	background: #81b0a5;
	width: 612px;
    height: 325px;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	border-left: 3px solid #ffffff;
	}

#presentationbox .p1 {
	height: 325px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: #97a25e;
}

#presentationbox .p2 {
	height: 27px;
	background: #81b0a5;
	margin: 0 0 0 0;
	padding: 15px 0 10px 10px;
	vertical-align: bottom;
	voice-family: "\\"}\\""; 
  voice-family:inherit;
	height: 25px;
	color: #ffffff;
}



#presentationbox img {
	
	border: 3px solid #fff;
	margin-left: 5px;
	margin-top: 5px;
	
}


#column2_buttonbox {
	position: absolute;
	top: 89px;
	left: 630px;
	width:181px;
	height: 282px;
	background-image: url(http://cdn.sitepoint.com/forums/images/special_buttons_on_background.jpg) no-repeat;
	padding: 0px 15px;
		
}

#column2_buttonbox img{
border: none;
}

/* Newsitem text */

#newsitem1 {
	margin: 100px 0 0 225px;
	background: #fff;
	padding: 100px 0 0 15px;
	border-left: 3px solid #ffffff;
}

#newsitem1 .p1 {
	margin: 8px 0 8px 0;
	background: #fff;
	padding: 8px 0 0 0;
	border-left: 3px solid #ffffff;
}

#newsitem1 h3 {
	background: url(about.gif) no-repeat;
  height: 19px;
	margin: 120px  0 0 0;
	padding: 100px 0 0 0;
	
}


/* supportingText  */

#supportingText {
	
	margin: 0 0 0 225px;
	background: #fff;
	border-left: 3px solid #ffffff;
	padding: 0 15px 1px 15px;
	
}

#newsitem2 h3 {
	background: url(about.gif) no-repeat;
  height: 19px;
	margin: 0px;
	padding: 0px;
}

#newsitem3 h3 {
	height: 15px;
}

#newsitem4 h3 {
	height: 18px;
}

#newsitem5 h3 {
	height: 15px;
}

#footer /*#newsitem5 .p5*/ {
	
    position: absolute;
    bottom:0;
	margin: 0;
	padding: 0;
	text-align: right;
	height: 60px;
	width: 840px;
	background:#4b9695;
	border-bottom: 25px solid #ffffff;
}



/* linkList stuff */

#linkList {
		position: absolute;
		top: 78px;
	left: 2px;
	width: 220px;
	background: #d4dedc;
	
}

#linkList2 {
	padding: 15px 10px 10px 10px;
}

#navcap {
	position: absolute;
	top: 8px;
	left:11px
	
}

#nav_bottom {
	position: absolute;
	top: 350px;
	left:11px;
	
}


#ldirector {
	height: 240px;
	}

#ldirector p {
color: #4b9695;	
margin: 0 0 0 0;	
Font-weight: bold;
padding-top: 25px;

}



#ldirector h3 {
   height: 20px;
   padding: 5px 0 5px 10px;
   background: #4b9695;
   margin-top: 30px;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 1em;
}


#ldirector img {
	float: left;
	padding: 15px 5px 0 0;
}

#ladministrator {
height: 200px;	
margin-top: 50px;

}

#ladministrator p {
	width: 200px;
color: #4b9695;	
Font-weight: bold;
margin-top: 30px;
margin-left: 10px;
}

#ladministrator h3 {
	
height: 20px;
  padding: 5px 0 5px 10px;
   background: #4b9695;
   margin-top: 30px;
  color: #ffffff;
  text-transform: uppercase;
  font-size: .95em;
}


#ladministrator img {
	float: right;
	margin: 15px 8px 0 5px;
	border: 2px solid #ffffff;
}

/**slideshow**/

.slideshow {  
    height:  330px;  
    width:   432px;  
    padding: 0;  
    margin:  0;  
	overflow: hidden;
	}

 
.slideshow img {  
    padding: 5px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  400px; 
    height: 300px; 
    top:  0; 
    left: 0 
} 

#slideshow img { display: none }
#slideshow img.first { display: block }

.clearfooter {
height: 330px;
clear: both;
}

and for your markup ( replace EVERYTHING AFTER and including the BODY tag):

<body>
<div id="container">
	<!--this is where INTRO div started-->
    <div id="pageHeader">
    <h1> <img src="images/headerexperiement.jpg" alt="" width="840" height="70" /></h1>
    </div> <!--end of page header-->

		
   <div id="presentationbox">

        
       <div class="slideshow">
		<img src="../images/building.jpg" width="400" height="300" class="first" />
		<img src="../images/weightroom.jpg" width="400" height="300" />
		<img src="../images/taichi.jpg" width="400" height="300" />
	   </div> <!--end of slideshow-->
                        
   	   <p class="p2">This is the text in the ruler</p>
                
       <div id="column2_buttonbox"><img src="images/4_special_buttons.jpg" width="181" height="300" 
        alt="internet buttons" />
       </div><!--BUTTONBOX--> 
        
        
   </div><!--PRESENTATION BOX-->

        
     
   <div id="newsitem1">
			<h3>TOPIC 1</h3>
			<p class="p1">This will be the first paragraph in the document and I am not sure what I will be typing in here but This will be the first paragraph in the document and I am not sure what I will be typing in here butThis will bThis will be the first paragraph in the document and I am not sure what I will be typing in here butThis will be the first paragraph in the document and I am not sure what I will be typing in here bute the first paragraph in the document and I am not sure what I will be typing in here but</p>
 </div> <!--newsitem1 end-->
	
        

  	<div id="supportingText">
		<div id="newsitem2">
			<h3>TOPIC 2</h3>

			<p class="p1">This will be sometype of newsitem that I will be placing in this spot.This will be sometype of newsitem that I will be placing in this spot.This will be sometype of newsitem that I will be placing in this spot.This will be sometype of newsitem that I will be placing in this spot.This will be sometype of newsitem that I will be placing in this spot.This will be sometype of newsitem that I will be placing in this spot.This will be sometype of newsitem that I will be placing in this spot.This will be sometype of newsitem that I will be placing in this spot.</p>
       </div><!--newsitem2 end-->

		<div id="newsitem3">
			<h3>TOPIC 3</h3>
			<p class="p1">text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
			<p class="p1"> text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>

      </div> <!--newsitem3 end-->

		<div id="newsitem4">
			<h3>&nbsp;</h3>
</div>  
		<!--newsitem4 end-->

		<div id="newsitem5">

			<h3>&nbsp;</h3>
</div><!--newsitem5 end-->

	<!--this is were intro div ended - put back if needed-->
       

  </div><!--supportingtext end-->


    
    
	<div id="linkList">
		<div id="linkList2">
        
   <div id="navcap"><img src="images/navigation-cap.gif" width="200" height="18" alt="navigation cap" /></div>

<div id="firstpane" class="menu_list">
 <p class="menu_head">Home</p>

  <div class="menu_body"><a href="#">Link-1</a></div>
  <p class="menu_head">LifeCare</p>
  <div class="menu_body">
    <a href="#">Independent Living</a>
    <a href="#">Assisted Living</a>
    <a href="#">Health Services</a>

    <a href="#">Other Services</a>
   </div>
   
  <p class="menu_head">Health Services</p>
  <div class="menu_body">
    <a href="#">24 Nursing Care</a>
    <a href="#">Health Center Nursing Care</a>
    <a href="#">Apartment Nursing Care</a>

    <a href="#">Physical Therapy</a>
    <a href="#">Dietician</a>
    <a href="#">Companions</a>
    </div>
  
  <p class="menu_head">Amenities</p>
  <div class="menu_body">
    <a href="#">Dining Services</a>

    <a href="#">Transportation</a>
    <a href="#">Movie Theater</a>
    <a href="#">Internet Cafe/Coffee Shop</a>
    </div>
  
  <p class="menu_head">Recreation/Wellness</p>
  <div class="menu_body">
    <a href="#">Programs</a>

    <a href="#">Pool/Spa</a>
    <a href="#">Salon</a>
    <a href="#">Massage Therapy</a>
    <a href="#">Volunteer</a>
    </div>
  
  <p class="menu_head">About Oaknoll</p>

  <div class="menu_body">
    <a href="#">Mission Statement</a>
    <a href="#">History</a>
    </div>
  
  <p class="menu_head">LifeCare Services</p>
  <div class="menu_body">
    <a href="#">Maintenance</a>

    <a href="#">Housekeeping</a>
    <a href="#">Laundry</a>
    <a href="#">Technology</a>
    </div>
  
  <p class="menu_head">Employment</p>
  <div class="menu_body">
    <a href="#">Current Openings</a>

    <a href="#">Application</a>
    <a href="#">Volunteering</a>
    </div>
  
  
  <p class="menu_head">Contact Us</p>
  <div class="menu_body">
    <a href="#"></a>
   </div>  
  
  
  
  
  

<div id="ldirector">
          
			<h3>Meet our Director</h3>
			  <img src="images/Pat_Heiden.png" alt="" width="67" height="200" />
			
            <p>Patricia Heiden ~ <br />
            A Director With A Dream. <br /><br />
            Click here to learn more...</p>

</div> <!--director end-->

            
            
			<div id="ladministrator">
				<h3 class="administrator">Meet our Administrator</h3>
				<img src="images/Steve_Roe.jpg" width="66" height="88" alt="Chris Roe" />
				<p>Meet Steve Rowe, Our Administrator</p>
</div> <!--administrator end-->
</div>
    	</div><!--Linklist end-->
	</div>  <!--Linklist2 end-->



 <div id="footer">
	<p>This is the footer info</p> 
</div>

</div><!--container end-->
</body>
</html>

That should do it.

PaulOB · September 14, 2011, 8:20am

Ray you should remove the voice family hack rules as its a hack for IE5 but what’s worse is that even if support for ie5 is required then the manner it has been implemented above will ensure that ie5 is even more broken than it should be. IE5 will miss all the rules following the hack and all the rules in the whole next rule block as well.

sarb · September 19, 2011, 7:16pm

Thank you all for your help and support on this. I was called away for a family issue, but am back and going to work on the site tonight and incorporate (and learn from) your input.

Topic		Replies	Views
Footer positioning problems HTML & CSS	4	502	January 14, 2010
Footer problem -- again! )c: HTML & CSS	21	1418	June 1, 2010
Footer Issue HTML & CSS	2	724	October 8, 2014
Footer goes crazy, won't push down HTML & CSS	5	4487	August 18, 2010
CSS Footer HTML & CSS	3	936	July 4, 2018

Footer problem

Related topics