Member Avatar for BlueCharge

Hello Everyone,

I am just wanting to know how I would display an image at the top left of a DIV container and have text going down the right of it and then when it gets past the image, the text the prints all the way across underneith the image. (What you can do in Word).

Thanks

Daniel

  • 4 Contributors
  • 3 Replies
  • 109 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ansaripk

Dani AI

Generated

— and are on the right track: a floated image placed before the article text produces the exact Word-like effect you described (text runs down the right side of the image, then flows full-width once it passes the image). Floats remove the image from normal flow so inline content wraps around it; see the browser docs for details: MDN: float.

Practical refinements and things that often get missed:

  • Put the image element before the paragraph so wrapping happens predictably.
  • Add a right margin so text doesn’t butt up against the image, and keep the image responsive with max-width + height:auto.
  • Make sure the container "contains" the float (so its background/borders expand). The safest, modern clearfix is the pseudo-element approach shown below.
.article::after {
  content: "";
  display: table;
  clear: both;
}

.article img {
  float: left;
  margin: 0 1rem 1rem 0;
  max-width: 140px;
  height: auto;
  display: block;
}

Accessibility and responsiveness notes: always include a meaningful alt for the image, avoid hard-coding height that distorts aspect ratio, and use srcset/sizes for different device resolutions if the image is important. If you’re creating a repeating post layout (blogs/news list), use semantic markup like <figure>/<figcaption> and a stylesheet class rather than inline styles, as recommended.

If you need a modern alternative (more layout control, better stacking on small screens), consider switching the article wrapper to a grid or flex layout with a media query to stack image above text on narrow screens — but for the exact wrap-under behavior, float is the simplest reliable solution. For more on clearfix and common patterns see the clearfix notes at CSS-Tricks and responsive image guidance on MDN: Responsive images.

Recommended Answers

All 3 Replies

Member Avatar for ko ko

Let us see your HTML.

Member Avatar for almostbob 
<div><img style='float:left'>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

styles of course belong in the stylesheet, and the images is not properly defined

Member Avatar for ansaripk

Although almostbob told a good solution but if you want to use this in repeating fashion like blog posts then you should use proper css codes instead of inline coding.

For example your div is a container for your text/article.

.container {
clear:both;
width:100%;
height:auto;
}
.container img { float:left}
now you can use this as:
<div class="container">
<img src="images/imagename.jpg" alt="text" width="50" height="50"/>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</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.