Home/ Questions/Q 7175347
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T16:16:17+00:00

I am using this technique for a sticky footer: http://ryanfait.com/sticky-footer/ I wanted to create

  • 0

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.stack.imgur.com/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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    http://jsfiddle.net/z5geM/

    • 0