CODEWITHSUNDEEP
htmlcss
Shehab Abd-Allah
Shehab Abd-Allah

Reputation: 11

want to seperate Footer from container in CSS

I want to seperate my whole footer from my container in css, when I put a background image for my footer it doesn't appear, and my footer is stuck to the container background

here is the html :

<div id="footer" role="contentinfo">
    <div id="colophon">
        <div id="site-info">
            <p>© 2012 <a href="http://localhost/oasis/" title="Oasis" rel="home">Oasis</a>. All Rights Reserved.</p>
        </div><!-- #site-info -->
        <div id="site-generator">
            <p>
                Powered by <a href="http://wordpress.org/" title="Semantic Personal Publishing Platform" rel="generator">WordPress</a> and <a href="http://blankthemes.com/">Blank Themes</a>.
            </p>
        </div><!-- #site-generator -->
    </div><!-- #colophon -->
</div><!-- #footer -->

And here is my CSS for both container and footer:

/* container */
#container { 
    background: url(images/content%20bg.gif) no-repeat;
    width: 940px;
    margin: 0 auto;
    padding: 14px;
    overflow: hidden;
}

#content-box {}

/* footer */    
#footer {
    background: url(images/fp_bg.gif) scroll; position: relative; top: 100px;
}

#footer #site-info {
    float: left;
}

#footer #site-generator, #footer #footer-right-side {
    float: right;
}

Upvotes: 0

Views: 745

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75379

You're not specifying a width for your footer since you separated it from your container. Just declare a width and positioning for your footer and it should work fine.

#footer {
    width:940px;
    margin: 0 auto;
}

Upvotes: 1

Related Questions