Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 261
  • Last Modified:

CSS - need help positioning footer on page.

Hi,
Can anyone tell me how I can get the footer at the bottom of my page after the main content and 20 px from the bottom? Something similar to the way the footer displays on Experts Exchange.

Thanks in advance for your assistance.




<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
 
body {
	margin:0;
	padding:0;
	height:100%; /* 100 % height */
	SCROLLBAR-FACE-COLOR:#2A55A3;
	SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
	SCROLLBAR-SHADOW-COLOR:#2A55A3;
	SCROLLBAR-3DLIGHT-COLOR:#FFFFFF;
	SCROLLBAR-ARROW-COLOR:#FFFFFF;
	SCROLLBAR-TRACK-COLOR:#FFFFFF;
	overflow-y: scroll;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: normal;
	color: #333333;
	z-index: 1;
	background-color: #00CC00;
}
 
#container {
	width: 900px;
	height: auto;
	position: absolute;
	top: 5px;
	left: 50%;
	margin-top: 5px;
	margin-bottom: 25px;
	margin-left: -450px;
	background-color: #333333;
	}
#header{
	position: absolute;
	top:0x;
	height: 136px;
	width: 900px;
	background-color: #336699;
}
#menu{
	position: absolute;
	top:136px;
	left:0px;
	height: 34px;
	width: 900px;
	z-index: 100;
	background-color: #0099FF;
}
#subheader{
	position: absolute;
	top: 170px;
	height: 130px;
	width: 900px;
	z-index: 10;
	background-color: #666699;
}
#main{
	position: absolute;
	top:300px;
	height: auto;
	background-color: #CCCC66;
	width: 870px;
	padding:15px;
}
#footer{
	height: 26px;
	width: 900px;
	background-color: red;
}
 
</style>
 
</head>
<body>
 
<div id="container">
<div id="header">header goes here</div>
<div id="menu">Menu here</div>
        <div id="subheader">Sub header here</div>
        <div id="main">Main content here - height will vary depending on content but footer should be below and I need footer 20px from bottom. 
       	</div><!-- end the main div --> 
 <div id="footer">footer here</div>
</div>      
</body>
</html>

Open in new window

0
sabecs
Asked:
sabecs
  • 2
  • 2
1 Solution
 
Mark StegglesWeb DeveloperCommented:
Hello,

This is the best way I have found to have a footer at 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" lang="en">
<head>
<title>footer at the bottom</title>
<style type="text/css">
* {
padding:0px; margin:0px;
}
html, body {
height:100%
}
#container {
min-height:100%;height:auto !important;height:100%
}
#content {
padding-bottom:20px
}
#footer {
background:#345;
margin-top:-20px;height:20px
}
</style>
</head>
 <body>
<div id="container">
<div id="content">
content
</div>
</div>
<div id="footer">footer</div>
</body>
</html>

Open in new window

0
 
sabecsAuthor Commented:
Thanks Steggs for your help,
I don't need the footer fixed in position a the bottom of my screen, I want it to be below my content, so depending on how much content I have on a page you might have to scroll down to see it.
 I hope this makes sense.  
0
 
Mark StegglesWeb DeveloperCommented:
O ok.

The problem is the over use of absolute positioning in your document. Absolute positioning takes the elements out of the flow so that they have no relationship with the elements around them.

You will have to get rid of the absolute positioning.

#container {
        width: 900px;
        margin: 5px auto 25px;
        background-color: #333333;
        }
#header{
        height: 136px;
        width: 900px;
        background-color: #336699;
}
#menu{
       height: 34px;
        width: 900px;
       background-color: #0099FF;
}
#subheader{
        height: 130px;
        width: 900px;
       background-color: #666699;
}
#main{
        background-color: #CCCC66;
        width: 870px;
        padding:15px;
}



0
 
sabecsAuthor Commented:
Thanks Steggs, its perfect.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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