I want id=“bottomContent” to stick.
I’m taking this approach…
html, body{height: 100%;}
#wrapper{
min-height: 100%;
margin-top: -432px;
}
* html #wrapper {/* ie6 and under only*/
height:100%;
}
header {
height: 100px;
margin-bottom: 10px;
border-top: 432px solid red;
}
#bottomContent{
position: relative;
float: left;
height: 432px;
}
It still seems to be a few pixels off. I Inspected Element of my bottom content and it says 432? Is there a better way to double check this?
One has to have a vertically oriented monitor to see the footer stick on your web page… pretty tall page 
Anyway, it seems to stick for me in Firefox. In which browser are you seeing the problem?
Also, you didn’t mention whether the footer is a “few pixels” short or tall… whether a few pixels of white space appears below it, or if it continues to trigger a vertical scrollbar. Where are those few pixels rendered?
I didn’t see either in FF, but may have missed something. Perhaps you could “fine tune” the description a bit.
Did you figure this out? I checked in Saf , FF and Chro on Mac ( with my monitor orientation to ~1600px tall ; yup it rotates ) and it seems ok to me ( I do see that you have a s light scroll bar , maybe that’s what you meant?)
That maybe caused by the 1px border on your footer element( or wrapper? ) , remember: padding and borders ADD to an element’s dimension.
Hi,
The height of your footer is 139px but the ul you have inisde it is 140px and thus gives you a scrollbar.
Reduce the ul by 1px.
e.g.
footer ul {
float: right;
[B] margin-top: 59px;[/B]
text-align: right;
}
As the height of the ul is dictated by its content then that may vary due to rounding errors in various browsers where line-height is taken into account. An easier option would be to add overflow:hidden to the footer as well.
Okay I did that but it stills seems like there are several pixels I’m missing somewhere on the home page…I have a 1200px height monitor so I’m able to drag my browser pretty tall and there scroll bar still isn’t going away.
Playing around with Dev Tools, I found that if I make my #wrapper margin-top: -442px the scroll goes away. But I have no clue where these extra 10px are coming from?
This seems to be working fine in FF, but not Chrome or Safari…weird.
This link has no content so it’s easier to play with…
http://www.ogsindustries.com/lemdev/howtovideos.php
After reading Paul’s observation, the problem is clear. The contents of #bottomContent are too precisely fitted into their boxes. Any increase in the height of the font in <footer>, for example, will cause the text to overflow the bottom of the footer box; thus, “breaking” the sticky footer.
That difference in font size could easily occur on different platforms - PC vs Mac vs Linux, etc. - or when a user zooms their text, or as you are seeing… when you change browsers - probably because the default font or zoom settings are different.
I would like to suggest a different approach to positioning the <ul> in the footer.
ADD the BLUE, DELETE the RED.
footer {
[color=blue]position:relative;[/color]
}
footer ul {
[color=blue]position:absolute;
right:0;
bottom:0;[/color]
[color=red][s]float:right;[/s][/color]
[color=red][s]margin-top:60px;[/s][/color]
text-align:right;
}
Using this method, the user can almost double the size of the font before the text overflows the footer container. And adding overflow:hidden to the footer box will clip the overflowing text but prevent the scrollbar.
BUT WAIT… THERE’s MORE!
The above change will help, but not cure, your fundamental design problem. The actual sticky footer is the container #bottomContent which contains more text whose scalable size can also “break” the sticky footer.
Scalable elements, such as text or possibly vertical padding or margins if measured in ems or percents, must have room to resize within the sticky footer container without changing height of that container.
The following element uses huge vertical margins to position the text within #bottomContent. Any change in the height of the font (larger or smaller) will change the height of #col2. If the height of #col2 changes, the sticky footer “breaks”.
#col2 {
float: left;
font-family: sans-serif;
font-size: 10pt;
[color=red]margin: 50px 0;[/color] /* incompatible with sticky footer */
[color=blue]margin:50px 0 0;[/color] /* consider this instead */
[color=blue]height:282px;[/color] /* 432px - 150px */
width: 100%; /* unnecessary */
}
Likewise, the text within .lastone will “break” the sticky footer if zoomed larger. Setting {margin-bottom:0} would help.
Your particular page design is essentially incompatible with the sticky footer that you have implemented.
Paul created another type of sticky footer that is not dependent on footer height, that you might consider:
At the very least, I would encourage you to design with a larger font size so users will not be encouraged to zoom text larger and try very hard to include some expansion room around the fonts.
Hi,
Ron makes some good observations which you should look at but the extra 10 pixels is actually coming for the bottom margin on your header element collapsing onto the wrapper and making it 10px taller than 100%.
The reason for this is that you haven’t contained your floats properly and thus the margin escapes from the header onto its parent.
If you remove the 10px bottom margin from the header element the gap will disappear. It will also disappear if you contain the floats.
#wrapper:after{
content:" ";
display:block;
clear:both;
height:0;
visibility:hidden;
}
The gap would also disappear if you used floats correctly and only float elements that need to be floated. For example the bottom content and the mainContent should not be floated as they are 100% wide do not need to be floats. If you set mainContent to clear:both and not floated it would make #wrapper contain all the content nicely and stop the margin-collapse I mentioned above.
If you have floated columns then contain the floats with a suitable clearing mechanism and avoid the float everything approach as that leaves you a page with all elements removed from the flow and odd margins collapsing through to who knows where.
Using :after is way of clearing?
That’s the classic method, often referred to as “clearfix”. Placing some non-floated “pseudo” content after the container forces it to wrap around the floats, kind of like putting an empty clearing element in the HTML.
More info here:
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
and more in the css FAQ under the float section.