2
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:
Expand|Select|Wrap|Line Numbers
- <!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>
