Search code examples
htmlcsscss-content

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

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: https://i.sstatic.net/Mi1wL.png

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

https://i.sstatic.net/H6nX6.png

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?

Solution

  • 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.