Clever Geek Handbook

I am trying to insert my footer at the bottom of the page in css

I am using base zurbs to build my site and I am trying to figure out how to create a footer that sticks to the bottom of the page. I've tried absolute positioning, but it overlaps the content. The footer I'm trying to position at the bottom is inside the container, however I could move it wherever needed. You can view the site live here

html code

<div class="container">
    <div class="row">
        <div id="logo" class="two columns">
            <a href="http://anderskitson.ca/mrskitson2012"><img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/logo.png" alt="Mrs Kitson Kinderegarten"/></a>
        </div>
        <div id="title" class="ten columns">
        <p><span>Mr's</span> Kitson Kindergarten</p>
        </div>
    </div>
    <div class="row">
        <div class="ten columns">
            <div class="mainNav"><ul><li class="page_item page-item-19"><a href="http://anderskitson.ca/mrskitson2012/blog/">blog</a></li><li class="page_item page-item-17"><a href="http://anderskitson.ca/mrskitson2012/calendar/">calendar</a></li><li class="page_item page-item-9"><a href="http://anderskitson.ca/mrskitson2012/curriculum/">curriculum</a></li><li class="page_item page-item-15"><a href="http://anderskitson.ca/mrskitson2012/forms/">forms</a></li><li class="page_item page-item-2 current_page_item"><a href="http://anderskitson.ca/mrskitson2012/">home</a></li><li class="page_item page-item-13"><a href="http://anderskitson.ca/mrskitson2012/news/">news</a></li><li class="page_item page-item-11"><a href="http://anderskitson.ca/mrskitson2012/resources/">resources</a></li><li class="page_item page-item-21"><a href="http://anderskitson.ca/mrskitson2012/video/">video</a></li><li class="page_item page-item-7"><a href="http://anderskitson.ca/mrskitson2012/visible/">visible</a></li></ul></div>
        </div>
    </div>
    <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 id="footer" ></div>
<!-- container ends-->
</div>

css code

#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: absolute; bottom:0;}
+3


source to share


3 answers


This is your best bet:

Or I've used this in my projects:



Duplicate questions:

+4


source


You just need to add

html { height:100%; }


you have this on your body but not in your html tag.

0


source


You are using a foundation that changes the bottom: 0 absolute positioning. Evidence. Try to get rid of the css call in the header and see how you change.

0


source






More articles:


All Articles