Forum Moderators: not2easy
One solution I found is shown below. But it places the footer outside the container div but at the bottom of the page. That is not what I want. I want it at the bottom of the div.
<html>
<head>
<style type="text/css">
#container {
border:1px solid #000000;
margin:5px;
width:850px;
margin:auto;
text-align:left;
height: 500px;
}
#foot {
border:1px solid #000000;
position: absolute;
bottom: 0;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="foot">FOOTER</div>
</div>
</body>
</html>
So the HTML should be:
<body>
<div id="wrapper">
<div id="container">
text here>
</div>
<div id="footer">
footer stuff here
</div>
</div>
The #wrapper div should be 850px wide and 500px tall, margin 0 auto, and with your border. #container should have your padding and text alignment. The footer should just have a border-top setting, and any padding and text values you want for inside the footer.
The other poster is correct as well - you could use position:relative for the footer, but you'd also have to set the margin at 0 autp to center to, as well, and remove that "bottom:0" thing from the stylesheet.
