I feel like the problem has something do with my two wrapper divs. If you resize the window from the bottom, the footer works correctly until it hits “My recent topics.”
#parature_wrapper { /* wrap all of the content /
width: 960px;
margin: 0 auto;
position: relative;
background: url(topheader.png) no-repeat top left / nova logo + financial aid support center text + gradient background image */;
height: auto;
min-height: 850px;
} #parature_content { /* Main Page Content goes here. Left KB nav is included. */
position: absolute;
top: 166px;
right: 20px;
width: 630px;
background:url(content-bg.png) repeat;
font-size: 1.1em;
/*height: 5000px; */
padding-top: 20px;
padding: 20px;
What problem is it that you think you have exactly?
Ryan Fait’s sticky footer is pretty broken in a lot of browsers but it does seem to be working as would be expected in the browsers that it does work in.
Are you thinking that a sticky footer is something different to what it is?
A sticky footer is a footer that sits at the bottom of the viewport when the content on the page is small but sits at the bottom of the document when the content extends below the fold. It is not a fixed positioned footer that always sits at the bottom of the viewport. These are entirely different things.
We’d need to know what you expect and if you were expecting a sticky footer then we’d need to know where you are seeing it got wrong and in what browser. Ryan Fait’s sticky footer is buggy in IE7/8 and opera so have a look at the CSS faq (see my sig) for the real version that works everywhere.
If you wanted a fixed positioned footer then that’s another story altogether
hi paul, i was able to update it and get it working. the push class did not have the correct height assigned to it.
my intent was having it work like Ryan’s demo page. i think it’s working correctly now in ie 7-9, chrome, firefox http://www.nvcc.edu/home/ssuh/footer3/index4.html , i’ll need to double check opera.
Glad you realised the issue but as I said above Ryans footer (and his demo) don’t work in IE7, 8 and opera and neither does yours. As the inventor of the original sticky footer back in 2003 I think I’ve tested many sticky footers and the only one that is more or less foolproof is the one l have listed in the FAQ (and doesn’t really need a push div either for most uses).
Ryans (and your) footer gets stuck in the middle in IE7 8 and opera when you resize the screen form the bottom and then open it up again. The footer does not hug the bottom like it should.
You also have a logic error here:
#parature_content { /* Main Page Content goes here. Left KB nav is included. */
position: relative;
top: 165px;
left: 270px;
width: 630px;
background:url(content-bg.png) repeat;
font-size: 1.1em;
padding: 20px;
[B]min-height: 100%;
height: auto !important;
height: 100%;[/B]
}
That element already sits inside a min-height:100% element so you cannot base another element on min-height and therefore would collapse to zero in good browsers. However some browsers may try to help you out and you will get another 100% + 165px in height due the relative positioning you added. You can’t add anything to 100% as 100% is the max otherwise you have an element that is always too big for the container it sits in. Suffice to say the inner element should have all the 100% rules removed as CSS just doesn’t work like that.
Lastly this rule:
min-height: 100%;
height: auto !important;
height: 100%;
That’s the rule that kills IE7 and stops the footer being sticky. The code is correct but its an obscure bug that I have documented many times and causes IE7 to fail. The height:100% rule for IE6 should be in a separate ie6 only rule and then the important declaration can be removed and IE7 will work.
e.g.
html,body{
margin:0;
padding:0;
height:100%;
}
#outer{min-height:100%}
* html #outer{height:100%}
It’s actually less characters to write:
#outer{min-height:100%}
* html #outer{height:100%}
Than it is to write:
#outer{
min-height: 100%;
height: auto !important;
height: 100%;
}
But what’s more important is that the former works in IE7 without problem.
it doesn’t seem to push past one of the divs on the bttomo. i set the margin-top: -40px on the wrapper div but i have a bg image on that div and it’s hiding the image.
The problem is that you have moved #parature_content using relative positioning and relative positioning doesn;t actually move anything physically. It just moves it visually but the element remains in the same place it always was as far as everything on the page is concerned. This means that the top:165px you added to it will create a gap of 165px and content will overlap the element by 165px. Relative positioning isn’t meant for structural layout but for more subtle effects than that. You should use margins instead but you will have to take care of collapsing margins at the same time.
e.g.
#parature_wrapper {
min-height:100%;
[B]margin-bottom:-41px;[/B]
[B] padding:1px 0 0;/* stop margin-collapse*/
[/B]}
#parature_content { /* Main Page Content goes here. Left KB nav is included. */
position: relative;
[B] margin-top: 165px;/* not top:165px*/[/B]
left: 270px;
width: 630px;
background:url(http://www.nvcc.edu/home/ssuh/footer4/content-bg.png) repeat;
font-size: 1.1em;
padding: 20px;
}
However as you have used a bottom margin on the wrapper instead of a top margin as in my example then you will have to use the push div again and give it a height to match the footer.
In my example I use a negative margin-top on the wrapper but then I fill the gap with a top border on the first element on the page. In your page you have strangely placed an absolute element as the first on the page which makes that approach awkward and indeed is the reason that you moved the next element with relative positioning. Why didn’t you leave the element in the flow and not absolutely place it and then you wouldn’t have needed to move the element below by 165px?
One final point is that you have placed your left column absolutely and therefore the sticky footer (or indeed any normal footer) will take no notice of it whatsoever and if the left column is longer than the main content then the footer will overlap. For a two column layout you should have used two floats and then cleared then to regain the flow for the footer.
The reason I used absolute position is because the div for the left navigation is inside of the div content container. The div content container uses that gradient background also. I want that gradeitn background to scale as the container gets bigger.
We’re using another vendor product so I can’t really move divs around. Am I still able to accomplish this with a float?
If you can’t move the html then you are stuck using the absolute positioning for that left column. Just make sure that the main right column has a min-height set that is longer than the left column and then you should be ok.
The right vertical scrollbar will be present due to the min-height:100% and the 1px padding I added to stop the margin collapse because of the way that section was structured. Without changing it all around again you could probably use min-height:99.9% instead.
#parature_wrapper {
margin-bottom: -40px;/* adjust until footer sits on bottom*/
min-height: 99.9%;
}
It won’t be a perfect fit though because of the 99.9% height.
A lot of people actually use the height:100% + 1px padding in order to force the vertical scrollbar so that you don’t get the centring jump when it appears.
