hi,
i tried your code but i'm still having the same problem.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css">
/* These styles will create a two column format with a header stacked on top and a footer stacked on the bottom. In this example, the page height
is fixed, but you could make it fluid by omitting the "height" specification in the "copy" style. Also, this example uses the "leftcolumn" style for a
vertical navigation menu. It could be made wider in order to use it for regular text. You could also easily add a navigational menu into the header. */
body {
text-align: center; /* The centering in the body tag is solely for Internet Explorer, because it incorrectly interprets some of the css */
height: 100%;
padding: 0;
background-color: #e9e9e9; /* This background color (#2E1008) matches the edges of the background image, so that it blends seamlessly */
}
#contentwrapper {
width: 900px;
/* height: 640px; */
margin: 0px auto; /* This centers the content on the html page */
text-align: left; /* This forces the default text alignment to be left, since we centered it in the body tag */
/* background-image: url(background.jpg); The background image is 900px wide */
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
/* background-color: grey;*/
}
#header {
height: 90px;
width: 900px;
color: white;
background-color: red;
}
#maincontent {
width: 900px;
margin: 0px auto;
text-align: left;
/* background-color: purple;*/
}
#maincontent.h1, #maincontent.h2 { color: #FFFFFF; /* white */ }
#leftcolumn, #leftcolumn.li {
float: left;
width: 90px;
font-family: "Arial Narrow", Verdana, Geneva, sans-serif;
font-size: 12px;
text-align: left;
padding-top: 20px;
margin-left: 3px;
color: #2E1007;
/* background-color: yellow;*/
}
#copy {
width: 730px;
overflow: auto;
/* height: 360px; */
margin-left: 136px;
padding-left: 15px;
padding-right: 15px;
color: white;
/* background-color: green;*/
}
#footer {
width: 576px;
font-size: 16px;
color: #DCD28E;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
vertical-align: middle;
overflow: hidden;
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div id="contentwrapper">
<div id="header">Header logo or text
</div><!-- End of header -->
<div id="maincontent">
<ul id="leftcolumn">
<li><a href="index.php">home</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="contact.php">contact</a></li>
</ul><!-- End of leftcolumn -->
<div id="copy">
<h1>Heading</h1>
<h2>Subheading</h2>
<p>Body text</p>
<p>Body text</p>
<p>Body text</p>
</div><!-- End of copy -->
</div><!-- End of maincontent -->
<div id="footer">
<p>Footer text</p>
</div><!-- End of footer -->
</div><!-- End of contentwrapper -->
</body>
</html>
The footer is able to move down when there are more data displayed.
But when there is lesser data displayed( in the body text), the footer seems to go up to the middle of the page (refer to the code above).
I want the footer to stay at the bottom of the page even when there is less data in the body text and able to move down when there are more data displayed.
Can anyone show me the way to do this, thanks.