CODEWITHSUNDEEP
htmlcsssticky-footer
Cool Guy Yo
Cool Guy Yo

Reputation: 6110

I am trying to get css sticky footer to work

I have tried to implement css sticky footer on my page but it doesn't seem to be working. the footer is below the content but not sticking to the bottom of the page. http://www.cssstickyfooter.com/

you can view the site I am trying ti implement it on live at www.anderskitson.ca/mrskitson2012

Here is my html code, with some taking out for simplicity

<div class="container">
    <div id="main" class="row">
     <div class=" twelve columns ">
      <div class="row">
       <div class="11 columns offset-by-one">
        <img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/kidsDrawings.jpg" alt="Kids Drawings"/>
      </div>
     </div>
    </div>
   </div>
<!-- container ends-->
</div>
<div id="footer" ></div>

Here is my css declarations

.container{position:relative; min-height:100%; }
#main{ overflow:auto; padding-bottom: 300px; }
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: relative; margin-top: -300px; clear:both;}

Upvotes: 1

Views: 915

Answers (4)

w3uiguru
w3uiguru

Reputation: 5895

Update the css on line 45 foundation.css

html {
    font-size: 62.5%;
    height:100%
}

See the screen shot on this link: http://img854.imageshack.us/img854/9064/footerpos.jpg

Upvotes: 2

fn27
fn27

Reputation: 879

Try this HTML code: 

<body>
        <div class="container">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">  
       </div>
</body>

CSS code:

html, body {
height: 100%;
}     

.container {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
        }
        .footer, .push {
            height: 142px; /* .push must be the same height as .footer */
        }

Upvotes: 0

Wesley Terry
Wesley Terry

Reputation: 195

I added postion:fixed;display:block;min-width:100%;bottom:0; and it worked out fine. If you are going to be doing this I would probably also make the top of your footer.gif transparent. Or try a .png file with transparency.

Upvotes: 0

PRNDL Development Studios
PRNDL Development Studios

Reputation: 3300

Try bottom:0;min-width:100%; as part of your CSS

Upvotes: 0

Related Questions