Combining Vertical Centering and the 960 Grid
From Zanecorpwiki
It seems more or less possible to combine vertical centering and the 960 Grid, but you have to make some modifications to the standard approaches.
The primary difficulty is with the #nonFooter element used in the sticky footer setup. The element generally has min-height: 100% and no explicit height. The idea is that if the content isn't scrolling, the #nonFooter element non-the less fills 100% of the view, which is what pushes the #footer down and ultimately sticks it to the bottom of the page. If scrolling is in effect, then #nonFooter can grow to be larger than 100%, which keeps the #footer below the #nonFooter.
The problem is that vertical centering requires the parent element have a designated height. Calculated heights don't work. So it's necessary to change or add heigh: 100% to the #nonFooter style. The effect is, under certain circumstances, to end up getting pinning the #footer to the bottom of the view port rather than the bottom of the whole page when scrolling is in effect.
The solution is to use the fact that the 960 grid system makes use of floats. By clearing the floats, the footer gets pushed off under the content.
In other words, we engineer the style such that if everything fits and there's no scrolling, the height: 100% of the #nonFooter sticks the #footer to the bottom. Once things get compressed, then the #nonFooter becomes irrelevant, and the position of the #footer is determined by the float/clear interaction.
One last detail to deal with: in the standard sticky footer approach, padding between the #nonFoter and #footer can be controlled by manipulating the padding of the #content and top margin of the #footer elements. In a compressed situation, this doesn't work because the #nonFooter ends before the end of the #content, making the padding irrelevant.
In these cases it's necessary to ensure the padding by inserting a div with explicit height after the #content and before the #footer. When calculating the height, don't forget to take into account any bottom border present on the #content.
