Position footer so that it does not scroll up the page

[capnhud]

I tried to make it so that the contentwrapper and the footer would always meet no what content was in the content wrapper, but now all I get it is the repeating up the page. The only that I have made it so that they meet is that I have to indicate the height of the contentwrapper and then add negative margin to footer so they meet. I am sure that is not the correct way to do that. Is there a tutorial something that can help out with this situation?

Edited May 23, 2009 by capnhud

[jlhaslip]

The method I use to place the Footer at the bottom of the page is Ryan Fait Sticky Footer.

Google it. It uses the height of the footer and negative margins. Works for me. On long pages, the footer is off the display, but on the shorter pages it is at the bottom of the display. As I read your question, that is what you are asking for, I think.

Edited May 22, 2009 by jlhaslip

[capnhud]

This looks like it should work but for reason when I set the content wrapper to 100% it shrinks immensely instead of expand to hold the content.

[PicnicTutorials]

min-height 100% not height 100%....

[capnhud]

min-height 100%

 

 

I wish that would have worked but that does not either.

[PicnicTutorials]

Here we bro - I'll end your pain...

 

http://www.visibilityinherit.com/code/height-stickyfooter-centered.php

 

If that doesn't get you going, then give us a current link to your page in progress and we'll fix you up.

Edited May 23, 2009 by Eric

[capnhud]

If that doesn't get you going, then give us a current link to your page in progress and we'll fix you up.

 

When you said that I was like what is he talking about the link is at the beginning of the thread, but I see I messed that up also

here is the page

[PicnicTutorials]

You've positioned the footer absolute. You can do it that way, but not in conjunction with the other way also. You obviously did not read what my tut wrote (or Ryans Faits for that matter). Why don't you try the advice given within first, and then we'll go from there.

 

To recap, you can do it like this, or like this, but not both.

 

Or you can try your hand at Pauls - more or less the same stuff. He also debunks Ryans method in there.

 

Or Ray has a couple demos of the same also.

Edited May 23, 2009 by Eric

[capnhud]

Rays tutorial indicates to do it one way I try that, but the footer stays stuck in the middle I try your way I get a big gap like what is showing now. So I am not understanding when you say I cannot do it two when I am only trying to do one way.

[capnhud]

Unless I am missing something I have followed everything on this page

And the paragraph tag is at the very bottom. So what did I obviously not read.

 

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, input, textarea, p, blockquote, th, td {
[b]margin:0;
padding:0;[/b]
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0 none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0 none;
}
body.mceContentBody {
background:#FFFFFF url() repeat scroll 0 0;
color:#000000;
text-align:left;
}
body, html {
background:transparent url(bkgrnd.png) repeat-x scroll 0 0;
[b]height:100%;
overflow:inherit;[/b]
}
#bodywrapper {
[b]margin: 0 auto;
min-height:100%;
width:960px;[/b]
}
* html #bodywrapper {

[b]height:100%;[/b]


}
#header {
height:120px;
margin:0 0 6px;
}
#nav {
background:transparent url(table.png) repeat scroll 0 0;
font-family:Arial, Helvetica, Sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
height:145px;
line-height:1.2;
margin:0 auto;
width:960px;
}
#nav ul li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:120px;
}
#nav ul li a {
background:transparent url(nav_image.png) repeat-x scroll -81px 100%;
border-right:1px dotted #C2C2C2;
color:#f9f9f9;
display:block;
height:26px;
padding-top:12px;
text-align:center;
text-decoration:none;
visibility:visible;
}
#nav ul li a:hover {
background:transparent url(nav_image.png) repeat-x scroll -40px 0;
}
#nav ul, #nav ul ul li {
margin:0;
padding:0;
position:relative;
z-index:100;
}
#nav ul li ul {
height:40px;
left:-999em;
position:absolute;
top:38px;
z-index:100;
}
#nav ul li:hover ul ul, #nav ul li.sfhover ul ul {
left:-999em;
}
#nav ul li:hover ul, #nav ul li.sfhover ul, #nav ul ul li:hover ul, #nav ul ul li.sfhover ul {
left:auto;
}
#nav ul ul.subhor-1item li {
width:120px;
z-index:100;
}
#nav ul ul.subhor-2items li {
width:240px;
z-index:100;
}
#nav ul ul.subhor-3items li {
width:160px;
z-index:100;
}
#nav ul ul.subhor-4items li {
width:120px;
z-index:100;
}
#nav ul ul ul li {
clear:left;
}
#nav ul li:hover a, #nav ul li.sfhover a, #nav ul li a:hover {
background:#777777 none repeat scroll 0 0;
color:#EEEEEE;
}
#nav ul li a:hover {
background:transparent url(nav_image.png) repeat-x scroll -40px 0;
}
#nav ul li ul li a:hover {
background:transparent url(subver_bg.png) repeat scroll 0 0;
color:#FFFFFF;
}
#nav li#contact {
margin-right:-10px;
}
#nav li#contact a {
border-right:0 none;
}
#contentwrapper {
background:transparent none repeat scroll 0 0;
border-bottom:1px solid #C2C2C2;
border-left:1px solid #C2C2C2;
border-right:1px solid #C2C2C2;

min-height:100%;

position:relative;
width:958px;
margin:0 auto;
}
#headlinewrapper {
height:358px;
margin:-95px auto 0;
position:absolute;
top:26px;
width:960px;
z-index:1;
}
#leftheadline {
background:#940000 none repeat scroll 0 0;
height:300px;
left:10px;
margin:0 auto;
padding:0;
position:absolute;
color:#f9f9f9;
top:26px;
width:180px;
}
#leftcontent img{
background-color:transparent;
height:275px;
padding:10px 0 15px 15px;
position:relative;
width:165px;
text-decoration:none;
color:#f9f9f9;
font:normal 11px/1.2 arial, helvetica, sans-serif; 
}
#rightheadline {
background:#940000 none repeat scroll 0 0;
height:300px;
margin:0 auto;
padding:0;
color:#f9f9f9;
position:absolute;
right:10px;
top:26px;
width:180px;
}
#rightcontent img{
background-color:transparent;
height:275px;
padding:10px 15px 15px 0;
position:relative;
width:165px;
text-decoration:none;
color:#f9f9f9;
font:normal 11px/1.2 arial; 
}
#headlinecontainer {
background:transparent url(headshadow.png) no-repeat scroll center top;
height:358px;
left:186px;
padding-top:1px;
position:relative;
width:588px;
z-index:5;
}
#simplegallery {
margin-left:4px;
margin-top:3px;
position:relative;
visibility:hidden;
}
#simplegallery .gallerydesctext {
padding:2px 5px;
text-align:left;
}
/*This the middle content styling */
.middlecontent {
 background: transparent;
 height: 170px;
    position: relative;
 top:315px;
   width: 960px;

}
#leftmdlcontent {
   background: transparent;
   border:none;
   color:#404040;
   padding: 0 10px;
   width:340px;
}
h4.midcaption {
   font-family:Verdana, Corbel, sans-serif;
   font-size:14px;
   text-align:left;
   padding:0 0 3px 0;
}

h3.midheadline {
   background:none;
   font-family:Arial, Helvetica, sans-serif;
   font-size:22px;
   color:#940000;
   padding: 0 0 5px 0;
   text-align:left;
}
p.midcontdesc {
font-family:Verdana, Corbel, sans-serif;
background-color:transparent;
color: #404040;
text-decoration:none;
word-spacing: normal;
text-align:justify;
letter-spacing: 0;
line-height: 1.25em;
font-size: 10px;
width:220px;
}
.middlecontent img {
   float:right;
   padding:0;
   border:1px solid #333;
   margin: -48px 0 0 10px;
}
#mdlmdlcontent a {
 background: transparent;
 border-left: 1px dotted #333;
 height: 170px;
 padding: 0 0 0 12px;
 position: absolute;
 right: 395px;
 top: 0;
   width:190px;
}
#mdlmdlcontent img {
   position:relative;
   margin: 0 auto;
   top:0;
}
#rightmdlcontent {
 background: transparent;
 border-left: 1px dotted #333;
 color: #404040;
 padding: 0 10px;
 position: absolute;
 right: 0;
 top: 0;
 width: 340px;
}
/* End of middle content styling */
/* This is the beginning of the bottom content */
.bottomctnt {
   background: transparent;
 height: 245px;
    position: relative;
   top:345px;
 width:960px;

}
.bottomctnt h3 {
   background:url(h3bkgrnd.png) repeat scroll 0 0;
   height: 26px;
   color:#f9f9f9;
   font:normal 20px/1.2em Arial, Helvetica, sans-serif;
   padding:0 0 0 5px;
   text-align:left;

}

.bottomctnt h4 {
   height: 18px;
   color:#f9f9f9;
   font:normal 20px/1.2em Arial, Helvetica, sans-serif;
   padding:5px 5px;
   text-align:center;
}
.bottomctnt h5 {
   background:none;
   color:#940000;
   font: normal 14px/1.2 Verdana, Corbel, sans-serif;
   padding:5px 5px;
   text-align: center;
}

#bottomfrst {
left:10px;

position:relative;
width:220px;
}
#bottomfrst ul .news {
   background:transparent;
   padding:5px 6px;
   width:220px;
   font:normal 11px/1.22em Verdana, Corbel, sans-serif;
   color:#404040;
}
#bottomfrst a {
   background:none;
   color:#940000;
   text-decoration:none;
}
#bottomscnd {
left:250px;
margin: -334px auto 20px;
position:relative;
width:220px;
}
#bottomscnd img {

border:1px solid #333;
padding:0;
margin:10px auto;
}

/* This begins the footer section */


#footer{
background:transparent url(footer.png) repeat scroll 0 100%;
[b]height:183px;
margin:-183px auto 0;[/b]
font:normal 11px/1.2 arial, helvetica, sans-serif;
color:#f9f9f9;
}
#footer p {
text-align:justify;
margin:105px 160px 0;
}
#ftrnav {
background:transparent none repeat scroll 0 0;
border:medium none;
color:#f9f9f9;
line-height:1.22em;
right:125px;
margin-top:-31px;
padding:15px;
position:absolute;
}
#ftrnav li {
display:inline;
padding:15px;
}
#ftrnav a {
color:#f9f9f9;
text-decoration:none;

}
p {
   [b]padding:0 0 183px;[/b]
}

Edited May 23, 2009 by capnhud

[PicnicTutorials]

Your page needs a major overhaul I'm afraid. Wickman's good at that! From what I can tell, the footer is not sticking because everything is position relative.

 

You can only use the same id once per page (#bodywrapper). You can only have have one div with a min-height 100% per page. The "p" with the padding-bottom in my tut was only an example. You put the padding on one of your existing elements. If you remove the positioning from .bottomctnt you'll see that the footer falls into place. But of course that breaks your layout. So... an overhaul I'm afraid...

[capnhud]

Your page needs a major overhaul I'm afraid

 

I came to the same conclusion when I woke up this morning. Only this time I started with a background and footer to begin with and will continue from there. I did not know min-height could only be used once. Thanks for the information.