I am using this technique for a sticky footer: http://ryanfait.com/sticky-footer/
I wanted to create a border around my entire site that also encapsulates the footer but has passing around the entire page but ended up with this: https://i.sstatic.net/vmwTT.jpg
Notice how the white box is not moving down to the footer.
Here is the jsfiddle showing this problem: http://jsfiddle.net/hc3Xu/14/
*I had previously asked a similar question not realizing it was the footer and I got an answer telling me that it is the height: auto !important; in the container class that was the cause of the contentcontainer not stretching to 100%. Removing that however causes a problem with the footer not being set to the bottom of the page. So I can't figure out how to proceed.
Instead of:
.container {min-height:100%; height: auto !important; height:100%;
margin: 0 auto -30px; width:980px;
background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;}
try something like:
.container {min-height:100%; height: auto !important;
margin: 0 auto -30px; width:980px;
box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
-webkit-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
-moz-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;}
You'll then also need to tweak the left and top margins of the footer to bring it in line with your contentContainer div.