8

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>.

4
  • Have you tried using a div wrapper? You should read about inline vs. block elements. Aug 1, 2012 at 17:52
  • @Everyone who's answered/commented: I already had the image as part of this class: 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.
    – Dubslow
    Aug 1, 2012 at 17:56
  • However, thanks for all the pointers to the clear CSS property. That's one I had not found on my own. I'll add it to the img class and see what happens. PS: Using the <div> is not necessary, the clear: both can be added directly to the <img> tag to get the desired effect.
    – Dubslow
    Aug 1, 2012 at 17:57
  • And that worked! Thanks, guys! Upvotes for all answers mentioning clear: both, and the check mark goes to the guy with the least rep. Thanks for the help!
    – Dubslow
    Aug 1, 2012 at 17:58

4 Answers 4

11
<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.

9

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

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

And it works :) Your divs are using float: left therefore you have to put a div telling it to stop all this floating !

5
  • Actually, the page had no divs at all, and no float property specified for any tag.
    – Dubslow
    Aug 1, 2012 at 17:59
  • 1
    Well, inspect your code with Chrome of firebug and you'll see it does :) I suspect your JS library to do it for you though Aug 1, 2012 at 18:01
  • Okay, true, the JS was wrapping a div around each table individually. I guess what I meant was that I didn't use any div tags myself. Stupid humans :D
    – Dubslow
    Aug 1, 2012 at 18:07
  • 1
    I believe you, plus analyzing the html source (CTRL+U) reveals you're indeed right. It also shows that JS librairies can do a lot of things without us knowing about it! Aug 1, 2012 at 18:08
  • Well actually I did know about it in this case; if you look at the CSS I've actually added some properties to the dataTables_wrapper class, which is the div the JS wraps the tables in. Like I said, stupid humans and their imprecision ;)
    – Dubslow
    Aug 1, 2012 at 18:17
4

Apply the following style to the image.

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

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

HTML:

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

CSS:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.