CODEWITHSUNDEEP
csscss-floatcss-positionword-wrap
JBH
JBH

Reputation: 1958

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;">?

Upvotes: 0

Views: 52

Answers (1)

JDewitt
JDewitt

Reputation: 557

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; }

Upvotes: 2

Related Questions