Footer width issue

Question

I'm having a little problem here. I have the following CSS code:

body
{
    margin: 0 0 200px; //Same height of the footer
}
div.content
{
    display: table;
    margin: 0 auto;
}
div.main-content
{
    margin: 20px 10px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}

By this way, in all pages I use:

<div class='content'>
    <div class='main-content'>
        //Page content goes here
    </div>
</div>
<footer>
    //Footer content goes here
</footer>

My problem is that the footer is not keeping the width of the page if the resolution is lower than the content, becoming like this:

I've created this fiddle that shows the problem too: http://jsfiddle.net/pmb1vbdh/1/
See how the footer don't expand with the table and lets a white space? How I can solve this? Thanks!

Answer 1

It works. Check this.

div.content
{
    display: table;
    margin: 0 auto;
}
div.main-content
{
    margin: 20px 10px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}

<div class='content'>
    <div class='main-content'>
        //Page content goes here
    </div>
</div>
<footer>
    //Footer content goes here
</footer>

EDIT for comments in others' answer;

demo

Answer 2

The problem is that table and the display:table of div.content

Solution, set a class to the table.

HTML:

   <div class='content'>
    <div class='main-content'>
        <table class="tab">
            <strong>TABLE</strong>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </table>
    </div>
</div>
<footer>
    //Footer content goes here
</footer>

CSS:

body
{
    margin: 0 0 200px; //Same height of the footer
}
div.content
{
    display: table;
    margin: 0 auto;
}
div.main-content
{
    margin: 20px 10px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}
table .tab
{
    width: 1500px;
}

Working Demo

Answer 3

Gops AB is right. Your code is correct.

Answer 4

Try adding right: 0; to your CSS instead of width: 100%:

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    ...
}