I have an html code like this:

```
<html>
<head>
    <title>Title</title>
</head>
<body style="max-width: 1680px;">

    <div style="float:left; width:100%">
        <div style="overflow: auto">
            <table style="width: 100%" border="1">
                <thead>
                    <tr>
                        <th>Col 1</th>
                        <th>Col 2</th>
                        <th>Col 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Elem11-------------------------------------------------</td>
                        <td>Elem12-------------------------------------------------</td>
                        <td>Elem13-------------------------------------------------</td>
                    </tr>
                    <tr>
                        <td>Elem21</td>
                        <td>Elem22</td>
                        <td>Elem23</td>
                    </tr>
                    <tr>
                        <td>Elem31</td>
                        <td>Elem32</td>
                        <td>Elem33</td>
                    </tr>

                </tbody>
            </table>
            <div id="footer" style="width: 100%; overflow: auto;">
                <span style="width: 300px; float: left">Some footer</span>
                <span style="width: 300px">Some footer2</span>
                <span style="width: 300px; float: right;">Some footer3---------------------------------------</span>
            </div>

        </div>
    </div>
</body>
</html>

```

The problem is the div#footer is not correctly displayed when scrolling is appeared, so the div#footer is not aligned with the right border of the table, but is supposed to (see the figure below). How to make div#footer behave as if it is the last row of the table? It will be nice if the answer contains only CSS commands.

![Unwanted space](https://i.stack.imgur.com/IdW3C.png)

Thank you.