Programming Forums
User Name Password Register
 

RSS Feed
FORUM INDEX | TODAY'S POSTS | UNANSWERED THREADS | ADVANCED SEARCH

Reply
 
Thread Tools Display Modes
Old Sep 30th, 2012, 2:15 PM   #1
darkranger85
Hobbyist Programmer
 
Join Date: Jan 2011
Posts: 115
Rep Power: 7 darkranger85 is on a distinguished road
Problems with my footer.

Hey all,

I have a 3 column practice website going with a footer and a header.

My problem is that my center column text is starting to go beside and sometimes even below my footer.

I swear, getting things to stay in their places is the hardest part of making a website.

html Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <script src="../js/jquery-1.7.2.min.js"></script>
  5. <script src="../js/lightbox.js"></script>
  6. <link href="../css/lightbox.css" rel="stylesheet" />
  7. <link href="../css/styles.css" rel="stylesheet" media="screen" type="text/css" />
  8. <title></title>
  9. </head>
  10. <body>
  11. <div id="page_container">
  12.  
  13. <div id="header">
  14. <br />
  15. <img src="../images/logos/DClogo.png" />
  16. <hr />
  17. </div>
  18.  
  19. <div id="left_column">
  20. <ul>
  21. Menu<br />
  22. <hr />
  23. <li><a href=""><img src="../images/buttons/propertiesbtn.png" alt="" id="property" /></a></li>
  24. <li><a href=""><img src="../images/buttons/schoolsbtn.png" alt="" id="schools" /></a></li>
  25. <li><a href=""><img src="../images/buttons/communitybtn.png" alt="" id="community" /></a></li>
  26. </ul>
  27. </div>
  28.  
  29. <div id="center_column">
  30.  
  31. <p>This contemporary chalet is set on 5+ acres of beautiful coutry on the New York and Vermont border. A private
  32. pond makes it perfect for canoeing and fishing. It's cedar shake siding lends itself perfectly for a
  33. modern-rustic look.</p>
  34.  
  35. <p>Complimenting this rustic look, is a large and spacious deck that is perfect for cookouts or lounging in the
  36. sun.</p>
  37.  
  38. <p>Inside, the house has 2 regular bedrooms, a loft bedroom, and one bath. The livingroom sports a cathedral ceiling and
  39. is open to the kitchen, which is furnished with gorgious oak cabinets and is fully applianced.</p>
  40.  
  41. <p>With plenty of cabinet space, closets, utility room, and an outdoor shed (Nevermind the detatched 3 bay garage/workshop)
  42. there will always be plenty of storage space!</p>
  43.  
  44. <p>Downstairs is a rustic family room in the walk-out basement, perfect for getting the family together for a game!</p>
  45.  
  46. <p>On top of all of this, the house, while feeling bright and airy, is also surprisingly easy to heat!</p>
  47.  
  48. <p>Why?</p>
  49. </div>
  50.  
  51. <div id="right_column">
  52. Featured Property<br />
  53. <hr />
  54. <p><a href="pondchalet0001.html">Pondside Chalet</a></p>
  55. </div>
  56.  
  57. <div id="footer">
  58. <hr />
  59. <a href=""><img src="../images/buttons/homebtn.png" alt="" id="homebtn" /></a>
  60. <a href=""><img src="../images/buttons/contactbtn.png" alt="" id="contactbtn" /></a><br />
  61. </div>
  62. </div>
  63. </body>
  64. </html>

css Syntax (Toggle Plain Text)
  1. #page_container{
  2. width: 960px;
  3. min-height: 100%;
  4. position: relative;
  5. margin: 0 auto;
  6. background: #FFFFFF;
  7. border: 1px solid #000000;
  8. }
  9.  
  10. #header {
  11. text-align: center;
  12. }
  13.  
  14. #left_column {
  15. width: 20%;
  16. height: 100%;
  17. float: left;
  18. margin: auto;
  19. text-align: center;
  20. }
  21.  
  22. #center_column {
  23. width: 60%;
  24. float: left;
  25. }
  26.  
  27. #right_column {
  28. width: 20%;
  29. float: left;
  30. text-align: center;
  31. }
  32.  
  33. #footer {
  34. text-align: center;
  35. position:absolute;
  36. bottom:0;
  37. width:100%;
  38. float:right;
  39. height: 50px;
  40. clear: both;
  41. }
  42.  
  43. body {
  44. margin: 0;
  45. padding: 0;
  46. background-image: url('background.png');
  47. background-size: 100%;
  48. }
  49.  
  50. html, body {
  51. height: 100%;
  52. }
  53.  
  54. ul {
  55. list-style-type: none;
  56. }
  57.  
  58. hr {
  59. text-align: center;
  60. margin: auto;
  61. margin-bottom: 2px;
  62. display: block;
  63. width: 50%;
  64. }
__________________
"If builders built buildings the way programmers wrote programs, then the first woodpecker that came along wound destroy civilization." -Gerald Weinberg
darkranger85 is offline   Reply With Quote
Old Sep 30th, 2012, 9:03 PM   #2
Raybc
Hobbyist Programmer
 
Join Date: Jan 2011
Location: Australia
Posts: 195
Rep Power: 7 Raybc is on a distinguished road
Re: Problems with my footer.

css Syntax (Toggle Plain Text)
  1. #page_container{
  2. width: 960px;
  3. /*min-height: 100%; this is relative to portal/screen and uneccessary*/
  4. /*position: relative; this is auto/ uneccessary*/
  5.  
  6. margin: 0 auto;
  7. background: #FFFFFF;
  8. border: 1px solid #000000;
  9. }
  10.  
  11. #header {
  12. text-align: center;
  13. }
  14.  
  15. #left_column {
  16. width: 20%;
  17. height: 100%;
  18. float: left;
  19. margin: auto;
  20. text-align: center;
  21. }
  22.  
  23. #center_column {
  24. width: 60%;
  25. float: left;
  26. }
  27.  
  28. #right_column {
  29. width: 20%;
  30. float: left;
  31. text-align: center;
  32. }
  33.  
  34. #footer {
  35. text-align: center;
  36. /*position:relative; leave it static by default*/
  37. bottom:0;
  38. width:100%;
  39. /*float:right; dont float, it changes from the html document order and battles the static or relative position property*/
  40. height: 50px;
  41. clear: both; /*remains useful, but only applies to preceeding elements not the whole page*/
  42. }
  43.  
  44. body {
  45. margin: 0;
  46. padding: 0;
  47. background-image: url('background.png');
  48. background-size: 100%;
  49. }
  50.  
  51. html, body {
  52. height: 100%;
  53. }
  54.  
  55. ul {
  56. list-style-type: none;
  57. }
  58.  
  59. hr {
  60. text-align: center;
  61. margin: auto;
  62. margin-bottom: 2px;
  63. display: block;
  64. width: 50%;
  65. }
Try those changes. The float property will over-ride the position property and remove the element from the flow ordered by the html document.(not as much as the position:absolute rule though) Some browsers will not realize that you want the first given element (the container, in this case) to grow out to enclose all child elements in the document, including floats. because the start size of the container was only made the size of the startup viewport, you end up going outside its borders. By leaving it static in the flow, and specifying a clear:both or display:block rule you keep it as a child of the containing element in the css model as well.

This differs from the tutes in w3schools, which say clear applies only to floated elements, and only affects element coming after the cleared element in the document flow. I've always found that clear applies to the position of the element it is applied to in relation to previously placed elements. It may be a quirk of browsers, but it's pretty widespread.
Raybc is offline   Reply With Quote
Reply

Bookmarks

« Previous Thread in Forum | Next Thread in Forum »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Problems with fflush() on Linux Charlotte C 11 Nov 5th, 2011 12:42 AM
footer is the same width/margins as content, but still doesn't line up? pythonscript HTML / XHTML / CSS 0 Jun 7th, 2011 7:55 PM
Crashes and problems with multi-threaded Lua host (C++) dag10 C++ 2 Apr 1st, 2010 9:17 PM
Problems with upgrade on Bloodshed Dev C++ mattireland C++ 6 May 8th, 2008 6:05 AM
Force footer to bottom of page Obtruse_Man4 HTML / XHTML / CSS 145 Nov 13th, 2005 2:02 PM




DaniWeb IT Discussion Community
All times are GMT -5. The time now is 6:39 AM.

Powered by vBulletin® Version 3.7.0, Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Copyright ©2007 DaniWeb® LLC