I am having some difficulty placing a footer on my web page. I want the footer to automatically move down as more content is added. I did this by creating a relative box for the content and placing the footer below it in a relative position.
The trouble is, my content is in several relative boxes within the main box, and when I position them from the top, the main box does not expand to include them. It stays the height of the boxes it contains and does expand when they are spaced vertically. Thus, some of the content is below the boundaries of the main box and is overlapped by the footer.
How do I get the main box to extend when I change the positioning of the content? Thanks for your help. here is the code I am experimenting with and it illustrates my difficulty:
The trouble is, my content is in several relative boxes within the main box, and when I position them from the top, the main box does not expand to include them. It stays the height of the boxes it contains and does expand when they are spaced vertically. Thus, some of the content is below the boundaries of the main box and is overlapped by the footer.
How do I get the main box to extend when I change the positioning of the content? Thanks for your help. here is the code I am experimenting with and it illustrates my difficulty:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#main_box {
position: relative;
left: -9px;
top: -14px;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
z-index: 1;
width: 400px;
}
#content {
margin: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
position: relative;
z-index: 2;
left: 0px;
top: 100px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer {
position: relative;
z-index: 3;
left: -9px;
bottom: 0px;
background-color: #FF00FF;
margin: 0px;
padding: 0px;
width: 400px;
}
-->
</style>
</head>
<body>
<div id="main_box">
<div id="content">
<p>content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<div id="footer">
footer</div>
</body>
</html>
Comment