I've been looking around for ages on how to get my footer to extend to the bottom of the screen but I've had no luck and was wondering if anyone can help please.
Here is my code:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>The Richmond Arms</title>
<link rel=stylesheet type=text/css href=style.css>
<style>
BODY {
background: #555;
background-color:#FFFFFF;
margin: 0;
text-align: center;
}
#Container {
width: 590px;
margin: 0 auto;
text-align: left;
background-color:#FFFFFF;
}
#background {
background:url(layout/background_home.jpg);
width:590px;
height:600px;
}
#header {
position:relative;
background-color:#272827;
width:590px;
height:20px;
top:60px;
left:0px;
text-align:right;
}
#content {
position:relative;
width:335px;
height:480px;
top:70px;
left:230px;
padding:5px;
}
#footer {
position:absolute;
background-color:#272827;
width:590px;
top:600px;
text-align:right;
}
</style>
</head>
<body>
<div id="Container">
<div id="background">
<div id="header">
<table align="right"><tr><td valign="middle">
<h1><a href="index.html" class="nav">HOME</a> <a href="menus.html" class="nav">MENUS</a> <a href="media.html" class="nav">MEDIA</a> <a href="gallery.html" class="nav">GALLERY</a> <a href="hours.html" class="nav">HOURS</a> <a href="contact.html" class="nav">CONTACT</a></h1>
</td></tr></table>
</div>
<div id="content">
Welcome to the Richmond Arms. <br /><br />
We love our great balance between traditional
community pub and fabulous cuisine. Our customers love our tucked away position
in a Georgian townhouse and the unique atmosphere.<br />
<br />
You can relax with a selection of real ales, lagers and carefully selected wines while you choose from our refreshingly imaginative menu. Our food is freshly prepared and beautifully presented by our talented head chef, Adrian Couzens. All are staff are known for their friendly and enthusiastic service.<br /><br />
Directions: Take Lansdown Road out of the city centre, bear right at St Stephen’s Church into Richmond Road , Carry on past Richmond Hill and turn Right into Richmond Place . We’re on the left at number 7.
</div>
</div>
<div id="footer">
<table align="right"><tr><td>
<h1>7 Richmond Place - Bath - BA1 5PZ - 01225 316725</h1>
</td></tr></table>
</div>
</div>
</body>
</html>
I've tried so many things like setting the bottom margin to 0, setting the height of the footer to 100% (just extends way off the page), setting the container and body to min height and height of 100% but nothing has worked.
thank you for you help!
