Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

problems getting footer to stick to bottom of page

Status
Not open for further replies.
richcleverley

richcleverley

MIS
Jul 28, 2005
358
FR
Hi,

I am coding some pages that have differing amount of content in them (pulled from a database). The main content area is set with an absolute value, but when there is little content on the page the footer jumps up and doesn't stick where it should be. Can anyone help with getting it to stay at the bottom of the page?

Here is my html

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>site title</title>
<link href="images/styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="maincontent"><span class="headlft"><img src="images/topleft.jpg" alt="Header image"><span class="headmid" ><img src="images/banner.gif" alt="sitetitle"><span class="headrt"><img src="images/topright.jpg" alt="Header Image"></span></span></span>
<div class="menu">
  <div class="menutext"><a href="index.php">Home</a> | <a href="rental.php">Rentals </a>| <a href="sales.php">Sales</a> | <a href="village.php">Village Catalan</a> | <a href="links.php">Links</a> | <a href="about.php">About Us</a> | <a href="advertise.php">Advertise with Us</a> | <a href="login.php">Client Login</a> | <a href="contact.php">Contact</a> </div>

</div>


<div class="pageheader">
Search Results
</div>
<div class="proplist">
<div class="proptitle">
Title
</div>
  <div class="piclist"><img src="files/thumbs/" alt=""/></div>
  <div class="listdesc">
      Newly renovated Studio to let in Old Antibes.<br /><br />

    &pound; - &pound; per week.<br />Bedrooms: <br />
	Sleeps: </div>
	<span class="modt">
    <a href="propdetails.php?pid=">More Details </a>
	</span>

</div>
<div class="footer">
<div class="footerlt">&copy;2006 <span class="ftlink"><a href="[URL unfurl="true"]http://example1.com"[/URL] >Owners-direct.com</a></span></div><div class="footerrt"> <span class="ftlink">Website Designed and Coded by <a href="[URL unfurl="true"]http://www.example.com">mysite</a></span></div></div>[/URL]
</div>
</body>
</html>

and here is the css

Code: 
/* CSS Document */
body {
	background-color:#FFFFFF ;
	
	
}
h1{
padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
margin-left:10px;
margin-bottom:0px;
padding-top:10px;
}
 H1.two{
padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bolder;
text-decoration:none;
text-align:center;
margin-left:10px;
margin-bottom:0px;
padding-top:10px;
}
h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-left:10px;
margin-top:0px;
margin-bottom:0px;
padding-top:5px;
}
h3{
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
padding-top:2px;
padding-bottom:2px;

background-color:#A6F0F5;
}

.text{
padding-top:5px;
margin-top:0px;
margin-bottom:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-left:10px;
margin-right:10px;
}

a:link {
	color: #000000;
	text-decoration: none;
	font-weight:bold;
}
a:visited {
	text-decoration: none;
	color:#000000;
	font-weight:bold;
}
a:hover {
	text-decoration: none;
	color:#FF0000;
	font-weight:bold;
}
a:active {
	text-decoration: none;
	}
	
	.ftlink a:link {
	color: #0F10A0;
	text-decoration: none;
	font-weight:bold;
}
.ftlink a:visited {
	text-decoration: none;
	color:#0F10A0;
	font-weight:bold;
}
.ftlink a:hover {
	text-decoration: none;
	color:#FF0000;
	font-weight:bold;
}
.ftlink a:active {
	text-decoration: none;
	}
.maincontent{
margin-left: auto;
margin-right: auto;
width:790px;
background-color:#EDFDFD;
border-color:#000000;
border-style:solid;
border-width:thin;
height:1100px;;

}
.headlft{
margin-top:0px;
padding:0px;
margin-bottom:0px;




}
.headmid{
margin-top:0px;
padding:0px;
margin-left:31px;
text-align:right;
margin-bottom:0px;


    
}
.headrt{
margin-top:0px;
padding:0px;
margin-top:0px;
margin-left:30px;
margin-bottom:0px;

}
.menu{
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
height:25px;
background-color:#BEC3FB;
border-top:solid #F99595 2px;
border-bottom:solid #F99595 2px;
margin-top:-5px;
padding:0px;
}
.menutext{
margin-top:5px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
.footer{
margin-top:35px;
margin-left:10px;
margin-right:10px;
border-top:solid black 2px;
margin-bottom:10px;
clear: left;
}
.footerlt{
margin-top:5px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
.footerrt{
margin-top:-15px;
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
.hmepageblock1{
margin-left:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
width:220px;
height:590px;
background-color:#FFFFFF;
border:solid #A6F0F5 1px;
}
.hmepageblock2{
margin-top:-592px;
margin-left:285px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
width:220px;
height:590px;
background-color:#FFFFFF;
border:solid #A6F0F5 1px;
}
.hmepageblock3{
margin-top:-592px;
margin-left:540px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
width:220px;
height:590px;


text-align:center;
}
.googleads{
margin-top:30px;
margin-left:30px;
margin-bottom:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
width:730px;
height:100px;
background-color:#FFFFFF;
border:solid #A6F0F5 1px;
}
.propdetailstextblock{
margin-top:10px;
margin-left:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:10px;
font-size:12px;
width:400px;
background-color:#FFFFFF;
border:solid #000000 1px;
float:left;
display: inline;
}
.propdetailsimgblock{

margin-left:35px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
width:300px;
margin-left:465px;

padding-top:5px;
padding-bottom:5px;
}
img.prop{
width:280px;
margin-bottom:5px;
margin-top:5px;
margin-left:10px;
margin-right:10px;
border:solid black 1px;
}
.proplist{
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
border:solid black 1px;
margin-top:10px;
width:600px;
margin-left:60px;
padding:10px;
}
.proptitle{
font-weight:bold;
margin-left:20px;
width:400px;
margin-top:10px;
display:inline;
}
.modt{
font-weight:bold;
margin-left:500px;
width:100px;
background-color:#00FF00;
text-align:right;
position:relative;
bottom:60px;



}
.pageheader{
margin-top:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
font-weight:bold;
}
.piclist{

margin:10px;
border:solid black 1px;
width:125px;
height:93px;
}
.listdesc{
font-weight:bold;
margin-left:150px;
width:300px;
height:85px;
margin-top:-90px;
display:block;
}
.indexlist{
font-weight:lighter;
margin-left:10px;
margin-top:10px;
}

I know that the alt tags in the html need sorting out, but they will be mainly dynamic from the database. I have just included the source view here rather than the php which brings the page all together (header and footer etc. all included as template files).

Various pieces of the css are for other pages and can be ignored.

Thanks,

Richard
 
Sort by date Sort by votes
Actually, don't worry about it. God knows why I was going for a fixed height anyway. Changed the height in maincontent to 100% and the pages are fine.

Richard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
718
bdwilcox
bdwilcox
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
783
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
205
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
764
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top