Member Avatar for bwallace

Hi everyone, I'm new in the forum. I've found the advice here helpful in the past and I'm hoping someone can help me now. I want to make this page look neater: . Does anyone have a suggestion to keep the images and captions from encroaching on the other paragraphs the way they do now? I can only imagine resizing the images but I think that could lead to problems, making some pictures look worse than others. Here's my basic code.

<span class="classname" style="float:right"><img src="pic.jpg" />
<br>Picture description<br>Click to buy</span>
<b>Section title</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis lorem id tortor commodo facilisis. Aenean commodo, tortor a volutpat iaculis, ipsum nisl lobortis tortor, sed ultrices nibh lectus et purus. Nullam vel felis tellus. Sed laoreet aliquet ligula, vel accumsan massa aliquet non. Cras ac quam quis mi consequat volutpat. Maecenas hendrerit dui sit amet eros condimentum non tincidunt tortor ultricies.
<br /><br />
  • 2 Contributors
  • 2 Replies
  • 89 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by bwallace

Dani AI

Generated

Good quick diagnostic by and a working quick-fix from . Floated images let inline text flow alongside them, which is what causes the "encroaching" look. Two cleaner, more robust choices are shown below: (A) keep a float but use semantic HTML and a proper clearfix so the float only affects the intended paragraph, or (B) stop text-wrapping entirely by using a media/flex layout so the image lives in its own column.

A — semantic float + clearfix (keeps the wrap behavior but controls spacing and scaling)

<figure class="float-right">
  <img src="pic.jpg" alt="short description">
  <figcaption>Picture description — <a href="#">Click to buy</a></figcaption>
</figure>

<h2>Section title</h2>
<p>First paragraph text here...</p>
.float-right { float: right; width: 220px; margin: 0 0 1em 1em; }
.float-right img { display: block; max-width: 100%; height: auto; }
.article::after { content: ""; display: table; clear: both; } /* clearfix / BFC */

B — media object with flexbox (prevents any paragraph from wrapping under the image)

<div class="media">
  <img src="pic.jpg" alt="short description">
  <div class="media-body">
    <h2>Section title</h2>
    <p>Full paragraph text here...</p>
  </div>
</div>
.media { display: flex; gap: 1rem; align-items: flex-start; }
.media img { width: 160px; max-width: 100%; height: auto; }

Additional notes: prefer figure/figcaption over <br> for captions (semantic and screen-reader friendly). Use max-width:100% and srcset/sizes to serve appropriately sized images for mobile/desktop (see MDN on responsive images). Be aware overflow:hidden (the quick-fix in the thread) creates a new block formatting context but can clip visible overflow like shadows; the clearfix/BFC or flex approaches avoid that side effect.

References: figure/figcaption element, responsive images / srcset, .

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

You could put a div around the paragraph and the image, but then the paragraphs would be separated with some whitespace.

Member Avatar for bwallace

Thanks, pritaeas. This works:

<div style="border-style:solid; overflow:hidden">
      <span class="classname" style="float:right"><img src="pic.jpg" />
      <br>Picture description<br>Click to buy</span>
      <b>Section title</b><br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis lorem id tortor commodo facilisis. Aenean commodo, tortor a volutpat iaculis, ipsum nisl lobortis tortor, sed ultrices nibh lectus et purus. Nullam vel felis tellus. Sed laoreet aliquet ligula, vel accumsan massa aliquet non. Cras ac quam quis mi consequat volutpat. Maecenas hendrerit dui sit amet eros condimentum non tincidunt tortor ultricies.
      <br /><br />
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.