100% height CSS footer Problem

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

I am having problems with the footer on this page it works fine as long as the content doesn't force the page to scroll but as soon as it does it does this and the footer stays at the bottom of the initial page instead of scaling with the content. Also I am not sure if this looks the same on all browsers (I hope it does) I am running it on FF OSX.

Also if someone knows of a good scaling 2 column 100% height template that I could start with that is solid in all browsers, I would be fine with a link to that as well.


Thanks for all the help.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

In your CSS for your footer id (#footer), your position is set to absolute. Change this to relative and I think that will fix your problem. So change:

Code: [ Select ]
    position:absolute;


to

Code: [ Select ]
    position:relative;
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

Thats made it fall to the bottom, but then i have a problem with the right column here and the footer is no longer at the bottom of the page here. Thanks for the reply.
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

Got it.

HTML
Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container" >
    <div id="header" > Head </div>
    <div id="wrapper" class="clearfix" >
            <div id="maincol" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam mattis, lorem eu ultrices tristique, neque magna ultrices velit, vehicula pretium
sem enim ut tellus. come sociis natoque penatibus et magnis this parturient montes,
convallis, neque magna tempor mauris, in rutrum purus mi non ante. Fusce enim tortor,
fringilla non, molestie a, varius vel, eros. Mauris tempor, est ac consequat vestibulum,
risus tortor tempus tellus, lobortis viverra nisi nulla et metus. Etiam hendrerit vestibulum
nibh. Sed lacus ante, vestibulum vel, auctor ut, tempor sed, leo. </div>
            <div id="leftcol" > Left Column </div>
    </div>
    <div id="footer" > Footer
    </div>
    </div>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Test</title>
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  6. <link rel="stylesheet" href="style.css" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="container" >
  10.     <div id="header" > Head </div>
  11.     <div id="wrapper" class="clearfix" >
  12.             <div id="maincol" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  13. Etiam mattis, lorem eu ultrices tristique, neque magna ultrices velit, vehicula pretium
  14. sem enim ut tellus. come sociis natoque penatibus et magnis this parturient montes,
  15. convallis, neque magna tempor mauris, in rutrum purus mi non ante. Fusce enim tortor,
  16. fringilla non, molestie a, varius vel, eros. Mauris tempor, est ac consequat vestibulum,
  17. risus tortor tempus tellus, lobortis viverra nisi nulla et metus. Etiam hendrerit vestibulum
  18. nibh. Sed lacus ante, vestibulum vel, auctor ut, tempor sed, leo. </div>
  19.             <div id="leftcol" > Left Column </div>
  20.     </div>
  21.     <div id="footer" > Footer
  22.     </div>
  23.     </div>
  24. </body>
  25. </html>


and CSS
Code: [ Select ]
/* generated by csscreator.com */
html, body{
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
    
    font-family:arial,sans-serif;
    font-size:small;
}

#container{
width:500px;
text-align:left;
position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
    background: #fff;
}

#wrapper {
        padding:0 0 5em; /* bottom padding for footer */}
#header{
position:relative;
height:150px;
background-color:#f20;
width:100%;
}

#leftcol{
width:150px;
float:left;
position:relative;
background-color:#B6FFFF;
}

#maincol{background-color: #FFFFFF;
float: right;
display:inline;
position: relative;
width:350px;
}

#footer{
height:10px;
background-color:#FFFFFF;
clear:both;
position:absolute;
    width:100%;
    bottom:10px; /* stick to bottom */

}



/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

h1 {
    font:1.5em georgia,serif;
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif;
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p {
    line-height:1.5;
    margin:0 0 1em;
}
  1. /* generated by csscreator.com */
  2. html, body{
  3.     margin:0;
  4.     padding:0;
  5.     height:100%; /* needed for container min-height */
  6.     background:gray;
  7.     
  8.     font-family:arial,sans-serif;
  9.     font-size:small;
  10. }
  11. #container{
  12. width:500px;
  13. text-align:left;
  14. position:relative; /* needed for footer positioning*/
  15.     margin:0 auto; /* center, not in IE5 */
  16.     
  17.     height:auto !important; /* real browsers */
  18.     height:100%; /* IE6: treaded as min-height*/
  19.     min-height:100%; /* real browsers */
  20.     background: #fff;
  21. }
  22. #wrapper {
  23.         padding:0 0 5em; /* bottom padding for footer */}
  24. #header{
  25. position:relative;
  26. height:150px;
  27. background-color:#f20;
  28. width:100%;
  29. }
  30. #leftcol{
  31. width:150px;
  32. float:left;
  33. position:relative;
  34. background-color:#B6FFFF;
  35. }
  36. #maincol{background-color: #FFFFFF;
  37. float: right;
  38. display:inline;
  39. position: relative;
  40. width:350px;
  41. }
  42. #footer{
  43. height:10px;
  44. background-color:#FFFFFF;
  45. clear:both;
  46. position:absolute;
  47.     width:100%;
  48.     bottom:10px; /* stick to bottom */
  49. }
  50. /* *** Float containers fix:
  51. http://www.csscreator.com/attributes/containedfloat.php *** */
  52. .clearfix:after {
  53. content: ".";
  54. display: block;
  55. height: 0;
  56. clear: both;
  57. visibility: hidden;
  58. }
  59. .clearfix{display: inline-block;}
  60. /* Hides from IE-mac \*/
  61. * html .clearfix{height: 1%;}
  62. .clearfix{display: block;}
  63. /* End hide from IE-mac */
  64. /*printer styles*/
  65. @media print{
  66. /*hide the left column when printing*/
  67. #leftcol{display:none;}
  68. #twocols, #maincol{width:100%; float:none;}
  69. }
  70. h1 {
  71.     font:1.5em georgia,serif;
  72.     margin:0.5em 0;
  73. }
  74. h2 {
  75.     font:1.25em georgia,serif;
  76.     margin:0 0 0.5em;
  77. }
  78.     h1, h2, a {
  79.         color:orange;
  80.     }
  81. p {
  82.     line-height:1.5;
  83.     margin:0 0 1em;
  84. }


Thanks for the help.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 45 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.