HTML5 body and footer

Question

I have a webpage which the main body is about 95% in width, So the problem i have is i want the footer to be 100% even though i am aware that the footer is a child of the main body this making the footer an equal width as the body.

Is there anyway i can override the footer without having to increase the body to 100% width?

I already attempted to set the footer inside a div but i still haven't been able to come up with a solution to my problem

Answer 1

Make a wrapper that is 100% width. Give your content 95% width, give everything else 100%.

<div class="wrapper">
    <header>...</header>
    <div id="content">...</div>
    <footer>...</footer>
</div>