• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 533
  • Last Modified:

Sticky footer stays still when new content is displayed

This is a new problem to me, and is worth a laugh if nothing else...!  Maybe I've been staring at it for too long...!?!?

I want to have a sticky footer at the bottom of each page.  There are dozens of tutorials for this, however, they all break down given the following scenario...
On page load, the page displays perfectly with the footer at the bottom.  I have some content (a paragraph) which is hidden on the page.  When the content displays, the page size expands to accommodate the content, however, the footer stays in the same place and does not move downwards.  

If you open the file attached and click the link, then scroll down, you'll see the problem.  Is there any way to stop this behaviour occurring?  More to the point, how come it happens in the first place when the style rules clearly state the DIV should be fastened to the bottom of the page??
<!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" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {position:absolute; bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
</head>
<body>
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window

0
Rouchie
Asked:
Rouchie
  • 7
  • 5
1 Solution
 
Roman GhermanCommented:
try this:
<!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" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {position:fixed; bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
</head>
<body>
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window

0
 
RouchieAuthor Commented:
Position:fixed is no good I'm afraid because then it floats over the top of the page content.  I just need the footer to stay at the bottom, and always at the bottom, without ever floating upwards to meet the content if there isn't much on the page...
0
 
Roman GhermanCommented:
then try this:
<!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" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
</head>
<body>
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window


however in initial state it will not be at the bottom of the page
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.

 
RouchieAuthor Commented:
Hi

The same can be achieved by just including the footer div normally with no styling.  

So far I have been completely able to meet both criteria that are needed - e.g. always at the bottom, plus when there is less content...
0
 
Roman GhermanCommented:
HEre is a Javascript solution:
<!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" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
	
	<script type="text/javascript">
		<!--
		function setFooterPostition()
		{
			 var viewportheight;
			 
			 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
			 
			 if (typeof window.innerWidth != 'undefined')
			 {
				
				  viewportheight = window.innerHeight
			 }
			 
			// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

			 else if (typeof document.documentElement != 'undefined'
				 && typeof document.documentElement.clientWidth !=
				 'undefined' && document.documentElement.clientWidth != 0)
			 {			
				   viewportheight = document.documentElement.clientHeight
			 }
			 
			 // older versions of IE
			 
			 else
			 {			   
				   viewportheight = document.getElementsByTagName('body')[0].clientHeight
			 }
			 
			
			if (document.getElementById('container').clientHeight > viewportheight)
			{
			    document.getElementById('footer').style.position = 'inherit';
			}
			else
			{
				document.getElementById('footer').style.position = 'absolute';
			}
		}
		//-->
	</script>

</head>
<body onload="setFooterPostition();" onresize="setFooterPostition();">
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window

0
 
RouchieAuthor Commented:
I thought that might be the next step.  The problem is that onresize is not valid XHTML...!
0
 
Roman GhermanCommented:
use window.onresize:
<!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" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
	
	<script type="text/javascript">
		<!--
		function setFooterPostition()
		{
			 var viewportheight;
			 
			 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
			 
			 if (typeof window.innerWidth != 'undefined')
			 {
				
				  viewportheight = window.innerHeight
			 }
			 
			// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

			 else if (typeof document.documentElement != 'undefined'
				 && typeof document.documentElement.clientWidth !=
				 'undefined' && document.documentElement.clientWidth != 0)
			 {			
				   viewportheight = document.documentElement.clientHeight
			 }
			 
			 // older versions of IE
			 
			 else
			 {			   
				   viewportheight = document.getElementsByTagName('body')[0].clientHeight
			 }
			 
			
			if (document.getElementById('container').clientHeight > viewportheight)
			{
			    document.getElementById('footer').style.position = 'inherit';
			}
			else
			{
				document.getElementById('footer').style.position = 'absolute';
			}
		}
		
		window.onresize = setFooterPostition;
		//-->
	</script>

</head>
<body onload="setFooterPostition();">
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window


0
 
RouchieAuthor Commented:
By complete blind luck I've actually managed to fix it using pure CSS.

The footer div's solid colour (in my real work) actually contains an image that I wanted to have stuck at the bottom.  If you specify min-height on HTML only, and keep the Footer inside the container div, it pushes the background image down perfectly...

That's one for the blog post methinks.


<!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" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html { margin: 0; padding: 0; min-height:100% }
		body { margin: 0; padding: 0; background-color: black; background:#000099 url(../images/bgimage.png) no-repeat right bottom}
		#container { position: relative; margin: 0 auto 180px auto; width: 950px; background-color: #aaaaaa; padding: 5px;}
		#header { height: 100px; background-color: white; border: 1px solid red; }
		#content { position: relative; margin-top: 1em; background-color: white; border: 1px solid red}
		#footer { height: 50px; background-color: white; border: 1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
	<div id="header">
		Header</div>
	<div id="content">
		<h1>Hello World</h1>
		<h2>Hello World</h2>
		<h3>Hello World</h3>
		<p>
			Lorem ipsum dolor sit amet.</p>
		<p>
			<a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
		<div id="showhide" style="display: none">
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
			<p>
				Lorem ipsum dolor sit amet.</p>
		</div>
	</div>
	<div id="footer">
		<p>
			Footer</p>
	</div>
</div>
</form>
</body>
</html>

Open in new window

0
 
RouchieAuthor Commented:
Sorry, background image is also moved into BODY tag rather than inside Footer
0
 
Roman GhermanCommented:
did you try my last solution?
0
 
RouchieAuthor Commented:
Yes, I'm afraid when the link is clicked to reveal the hidden contents, the footer does not move.  Also, when the window is certain sizes and the link is clicked to hide the contents, the footer positions itself incrrectly (too high).  Sorry about that.
0
 
RouchieAuthor Commented:
Found CSS solution.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now