Stupid HTML placement issue: Forcing one element below another?

Question

My basic layout is this:

<table>
...
</table>
<table>
...
</table> // There's actually five tables, but that's irrelevant
<img .../>
</body>

I'm trying to make the image into a footer, below all the tables, but the best I can manage is that it gets stuck to the right of the tables (my screen is large, so it might wrap around below the tables for you, but not for me) or I can get it to float right on top of the tables by using position:absolute. I cannot for the life of me get the image to be forcibly wrapped below the tables.

I've tried wrapping the image in a div and added all sorts of combinations of attributes/properties to the div, but like I said, they all produce one of the two bad results listed above.

Can anyone offer some sort of solution?

I've seen some other SO questions like How to force div to appear below not next to another?, but I don't understand that solution at all (how would float:left force something to be below something else?) and I'm also not convinced that the solution requires an extra wrapper <div>.

Answer 1

<div>
<table>
...
</table>
<table>
...
</table>

</div>
<div style="clear:both;">
<img .../>
</div>

</body>

or use css. and create a style for the img or div tag.