PDA

View Full Version : Footer problem

dcolin
12-18-2006, 01:40 PM
Could someone please have a look at the code below and tell me why i can't get the 'footer' to appear in the middle of the screen. Thanks. DC

<html>
<head>

<title>Two Column Page using CSS</title>

<style type="text/css">

body {
padding: 0;
margin: 100px 0 0 0;
text-align: center;
}

#pageholder {
width: 760px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

#header {
background-color: #f0fff0;
width: 760px;
height: 100px;
font-family: garamond;
font-size: 150%;
font-weight: bold;
color: #004400;
padding-top: 35px;
text-align: center;
text-decoration: underline;
}

#leftside {
background-color: #f0fff0;
width: 150px;
float: left;
}

#content {
background-color: #ffffff;
width: 610px;
float: left;
text-align: center;
font-family: garamond;
font-size: 80%;
font-weight: bold;
color: #004400;
padding-top: 10px;
}

#footer {
background-color: #f0fff0;
width: 760px;
height: 50px;
text-align: center;
font-family: helvetica;
font-size: 60%;
font-weight: bold;
color: #004400;
Padding-top: 10px;
clear: both;
}

#title {
font-family: garamond;
font-size: 110%;
font-weight: bold;
color: #006600;
text-decoration: underline;
padding: 5px 0 12px 25px;
}

#links {
font-family: garamond;
font-size: 90%;
font-weight: bold;
color: #004400;
padding: 0 0 10px 15px;
}

</style>

</head>
<body>

<div id="pageholder">

<div id="header">Header</div>
<div id="leftside">
<div id="title">Navigation</div>
<div id="links">
Here is a link<br />
Here is a link<br />
Here is a link<br />
Here is a link<br />
Here is a link<br />
Here is a link<br />
Here is a link<br />
</div>
</div>
<div id="content">Content</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="footer">Footer</div>

</div>

</body>
</html>
angelic.deception
12-18-2006, 11:22 PM
Try adding the part in red to your code; it worked when I tested it.
#footer {
margin: 0 auto;
background-color: #f0fff0;
width: 760px;
height: 50px;
text-align: center;
font-family: helvetica;
font-size: 60%;
font-weight: bold;
color: #004400;
Padding-top: 10px;
clear: both;
}
Hope that helps. =)