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>.
img.center { display: block; margin-left: auto; margin-right: auto; }; this was what made the image float in the center, but it still didn't wrap around.<div>is not necessary, theclear: bothcan be added directly to the<img>tag to get the desired effect.clear: both, and the check mark goes to the guy with the least rep. Thanks for the help!