Stupid HTML placement question: forcing one element under another?

Question

My main layout is this:

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

I'm trying to make the image in the footer below all the tables, but the best I can do is that it gets stuck to the right of the tables (my screen is large, so it can wrap around the table for you, but not for me), or I I can make it float right on top of the tables using the position: absolute. I can’t have my life make me look wrapped under tables.

I tried wrapping the image in a div and adding all kinds of combinations of attributes / properties to the div, but, as I said, they all produce one of the two unsuccessful results listed above.

Can anyone suggest some solution?

I saw some other questions, such as How to make a div appear below not next to another? , but I don’t understand this solution at all (how would float: left force something to be something else?), and I’m also not sure if the solution needs an additional <div> wrapper.

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.

Answer 2

Right after the last div containing the table, just add:

 <div style="clear:both"></div> 

And it works :) Your divs use float: left , so you need to put a div so that it stops all this floating!

Answer 3

Apply the following style to the image.

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

Answer 4

You can do this with css. Add a class to your image, and then change it to lock or clear floats. For example,

HTML:

 <img src="" class="my-img" /> 

CSS

 .my-img { display:block; /*Or*/ clear:both; }