CODEWITHSUNDEEP
htmlcss
WASasquatch
WASasquatch

Reputation: 629

Keeping footer down with margin?

I pretty much see to have all the bugs figured out so far, besides one... the footer, again, isn't attached to the bottom. I had to remove the relative and absolute method because the content would stretch under the footer. So I need some sort of way to expand the area between the content and footer dynamically to keep the footer on the bottom. Is there a way this can be done? I have a "box-divider" set to 100% height, but it doesn't seem to do anything.

Live code here http://jordan.rave5.com/tmp/

CSS

            #body {
                transition: height 2s;
                -webkit-transition: height 2s;
                width: 74%;
                min-width: 1024px;
                height: auto !important;
                margin: 0 auto;
                margin-top: 20px;
                margin-bottom: 20px;
                padding: 10px;
                background-color: #080908;
                 -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                -khtml-border-radius: 10px;
                border-radius: 10px;
                -moz-box-shadow: 0px 0px 6px #000;
                -webkit-box-shadow: 0px 0px 6px #000;
                box-shadow: 0px 0px 6px #000;
                /* For IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
                /* For IE 5.5 - 7 */
                filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
            }

            #body-content {
                display: none;
                height: 100%;
            }

            #box-divider {
                width: 75%;
                min-width: 1024px;
                height: 100%;
                margin: 20px auto 20px;
            }

            #footer {
                width: 100%;
                height: 150px;
                background-image: url(images/black-trans.png);
                background-repeat: repeat;
                padding: 0 0 20px;
            }

HTML

    <div id="background-overlay">
        <div id="background-gradient">

            <div id="header-image-grad">

                    <div id="header-container">
                        <div id="header">
                            <div id="navigation-container">
                                <div id="navigation">
                                    <span id="nav">Navigation Area...</span>
                                </div>
                            </div>
                        </div>
                    </div>

                <div id="header-image-border">
                    <img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
                    <div class="image-grad"></div>
                </div>

            </div>

            <div id="body">
                <div id="body-content"></div>
                <div class="loading"><img src="images/loading.gif" alt="Loading Content" /></div>
            </div>

            <div id="box-divider">
                &nbsp;
            </div>

            <div id="footer">
                <br />
                <div id="footer-content">
                    Footer Area...
                </div>
            </div>

        </div>
    </div>

Upvotes: 0

Views: 97

Answers (1)

Dan
Dan

Reputation: 3815

One of the many versions out there... i use one in my designs

Sticky footer

This is what i do with my sites

html, body {height: 100%}

#wrap
{
    min-height: 100%;
}

#footer
{
    position: relative;
    margin-top: -58px;
    clear: both;
    color: #333;
    font-size: 10px;
    text-align: center;
    height: 85px;
    background-image: url(../images/footerBG.jpg);
    background-repeat: repeat-x;
}

the negative top margin is what does the trick...

HTML

<body>

<div id="wrap"><!--for sticky footer-->

   <div id="headerWrapper"></div>

   <div id="navWrapper"></div>

   <div id="main">
     <p>this is where your content fun crazy shenanigans will go</p>
   </div><!--main or content-->

</div><!-- STICKY FOOTER -->

<div id="footer"></div>

</body>

Upvotes: 1

Related Questions