Footer wont meet the right edge of a re-sized window

Question

Before I start I'd like to note that I'm very new to HTML and I am self teaching. I just started recently and still have much to learn.

My issue seems simple yet I can't seem to figure it out. Everything else on the page is fine, it's just the footer that's the problem. At full screen the footer stretches the full width of the browser window:

But when shrinking it it accepts the window's dimension but it doesn't center it on the window:

This is the code I'm using in the style sheet for the footer.

div#footer{
        background-color: #37184c;                          
        padding-bottom: 307px;
        text-transform: uppercase;
        text-align: right;
        }

It is inserted outside of the page wrap which is set to 940px.

div#page-wrap{
    width: 940px;
    margin: 0 auto;
    }

The page wrap is where all of the content above the footer is held. Is there any way for me to get the footer to continuously stretch to the edge of the screen? Or should I remove the #page-wrap and try to center the content some other way?

can you add a fiddle ? – Vitorino fernandes Oct 04 '14 at 07:03 — Vitorino fernandes, Oct 04 '14 at 07:03

score 0 · Answer 1 · answered Oct 04 '14 at 07:04

You can try width: 100% on the footer div but without seeing more code, it is hard to fully diagnose.

Also consider using a CSS reset which will remove default values set by browsers that can make formatting/layouting a pain.

http://www.cssreset.com/what-is-a-css-reset/

score 0 · Accepted Answer · answered Oct 04 '14 at 07:09

Your CSS For Your Footer As Follow:

#footerwrapper {    
width:100%;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
#footercontent{
margin-left:auto;
margin-right:auto;
width:940px;
}

<!--HTML MARK-UP-->
<div id="footer">
<div id="footercontent">
<div>Your Footer info</div>
</div>
</div>

This is great because it will also set your footer to match your pagewrap width:940px; and it will keep all your content center with your pagewrap. Hope this helps.

score 0 · Answer 3 · answered Oct 04 '14 at 19:31

Thank you everyone for the help! I actually just now came up with a solution:

    div#footer{
        margin: 0 auto;
        background-color: #37184c;                          
        min-width: 980px;
        padding-bottom: 307px;
        text-transform: uppercase;
        text-align: right;
        }

I believe the issue was the due to the fact that the main content area has a fixed:

div#page-wrap{
    width:940px;
    margin: 0 auto;
}

It's not dynamic at all so essentially IT was what was hanging off of the edge. Setting a minimum width for the footer prevents this blemish from occurring and meets the edges of the window.

Thanks again for the help!

Don't forget to tag your solution as your question's right answer, so it doesn't show in the unanswered questions section anymore. — Antoine Combes, Oct 04 '14 at 19:35

Footer wont meet the right edge of a re-sized window

3 Answers3