I've read several articles about this like <http://css-tricks.com/all-about-floats/> or <http://www.sitepoint.com/simple-clearing-of-floats/> and all suggest the same tricks but they do not work for me.
HTML:

```
<html>
    <head>
    <body>
        <div id="wrapper">
            <div id="head">
                <div id="columns">              
                    <div id="result_wrapper" class="dataTables_wrapper">
                        <div id="result_length" class="dataTables_length">
                        <div class="dataTables_scroll">
                            <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0pt none; width: 100%;">
                                <div class="dataTables_scrollHeadInner" style="width: 1017px;">
                            </div>
                            <div class="dataTables_scrollBody" style="overflow: auto; height: 570px; width: 100%;">
                                <table id="result" style="margin-left: 0pt; width: 100%;">
                            </div>
                    </div>
                    <div id="result_info" class="dataTables_info">Showing 1 to 2 of 451 entries</div>
                    <div id="result_paginate" class="dataTables_paginate paging_full_numbers">
                </div>
            </div>
            <div id="foot">
        </div>
    </body>
</html>

```

My footer div has a margin-top which is ignored or the margin is calculated from the wrong element. The footer appears within the container div instead below it. Issue is identical in IE8 and FF 9.0.1

Any ideas?

EDIT:

CSS:

```
div#head {
    position: absolute;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}
div#foot {    
    position: relative;
    width: 1000px;
    margin-top: 30px;
}

div#columns {
    position: relative;
    width: 1000px;
    top: 50px;
    overflow: auto;
}

div#wrapper {

    position:relative;

    margin-left:auto;

    margin-right:auto;

    top: 20px;

    width:1000px;

}

```

Note: I'm using datatables plugin. part of the html is generated by that plugin (including the inline styles.
The css for that is too long to fully post here.

Some datatables css:

```
.dataTables_info {
    width: 60%;
    float: left;
}

.dataTables_paginate {
    width: 44px;
    * width: 50px;
    float: right;
    text-align: right;
}

```

EDIT 2:

Screenshot of the issue after applying Scotts fix (which does not help either)

![div id="columns"](https://i.stack.imgur.com/YgUz5.png)

![div id="foot"](https://i.stack.imgur.com/uB3bO.png)

![Firebug HTML Panel](https://i.stack.imgur.com/2xR8h.png)

Note that the markup in columns is created in JQuerys $(document).ready function. Maybe that causes the issue?

EDIT 3:

I tried jsFiddle however while the clear float fixes work there they disrupt the display of the datatable.

clear float trick from scott applied: 
<http://jsfiddle.net/yApAh/6/>

footer is right but the rest of the table is wrong

without clear trick:
<http://jsfiddle.net/yApAh/7/>

here footer is wrong but datatable is displayed as desired.