By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,549 Members | 867 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,549 IT Pros & Developers. It's quick & easy.

Creating Footers

P: 2
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:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. #main_box {
  9.     position: relative;
  10.     left: -9px;
  11.     top: -14px;
  12.     margin: 0px;
  13.     padding: 0px;
  14.     border-top-width: 0px;
  15.     border-right-width: 0px;
  16.     border-bottom-width: 0px;
  17.     border-left-width: 0px;
  18.     z-index: 1;
  19.     width: 400px;
  20. }
  21. #content {
  22.     margin: 0px;
  23.     border-top-width: 0px;
  24.     border-right-width: 0px;
  25.     border-bottom-width: 0px;
  26.     border-left-width: 0px;
  27.     position: relative;
  28.     z-index: 2;
  29.     left: 0px;
  30.     top: 100px;
  31.     padding-top: 0px;
  32.     padding-right: 0px;
  33.     padding-bottom: 0px;
  34.     padding-left: 0px;
  36. }
  37. #footer {
  38.     position: relative;
  39.     z-index: 3;
  40.     left: -9px;
  41.     bottom: 0px;
  42.     background-color: #FF00FF;
  43.     margin: 0px;
  44.     padding: 0px;
  45.     width: 400px;
  46. }
  47. -->
  48. </style>
  49. </head>
  51. <body>
  52. <div id="main_box">
  53. <div id="content">
  54.   <p>content content content content content content content content content content content content content content content content content content content content content content </p>
  55. </div>
  56. </div>
  57. <div id="footer">
  58. footer</div>
  60. </body>
  61. </html>
Nov 27 '08 #1
Share this Question
Share on Google+
3 Replies

Expert 5K+
P: 7,435
Relative positioning moves the containers 'relative' to where they are but does not remove the space they occupied nor affect other elements they may cover up. iow, the 'flow' of the content will not change so the container will not change. This method may not be appropriate for what you are trying to do or maybe what you are trying to do is not going to be easy.
Nov 28 '08 #2

P: 2
Thank you for your reply. I think I understand the problem better now. Do have any suggestions for a better way to place a footer that will move down as more content is added?
Nov 28 '08 #3

Expert 5K+
P: 7,435
What many do is wrap the content of the other elements in a <div> and place the footer outside that so as the div expands it pushes the footer down:
Nov 28 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.