Search code examples
csscss-floatcss-positionword-wrap

How do I keep an object from wrapping around a floated image?

The following image shows the result of an <img> tag floating left. The margins aren't all worked out, but the <h1> tag is wrapping.

enter image description here

Question:  The book statistics in the brown area are inside a <table> block. When it wraps, it wraps as a complete block as shown in the image. Is it possible to exclude the <table> block from the wrapping caused by <img style="float:left;">?

  • I tried using both position and float together. It didn't work. <clear> applies only to the floated object, not to wrapped objects.

  • Conceptually, I'm looking for the equivalent of the following fictional CSS assignment, which would be applied to the <table> tag: ignore-float:true

Solution

  • What you're looking for isn't possible, so far as I can tell, with the current order of your HTML markup. If you add another div wrapped around the image and the table, and float the div itself, the table will stay under the image and other elements will wrap around them.

    <h1>Header</h1>
<div class="image-wrap">
  <img src="..." alt="" />
  <table> ... </table>
</div>
<p>Paragraph text</p>

    and for your CSS:

    .image-wrap { float: left; max-width: 200px; }
.image-wrap img { display: block; }