# Text flowing around image

**URL:** <https://forums.realmacsoftware.com/t/text-flowing-around-image/53611>\
**Category:** RapidWeaver Elements\
**Created:** [January 13, 2026, 3:28pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611 "2026-01-13T15:28:31Z")\
**Posts on this page:** 19\
**Page:** 3

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [January 25, 2026, 6:24pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/41 "2026-01-25T18:24:44Z")

</div>

Hey upssjw!

Great point! If you want to ensure two columns on larger screens and keep it single-column on smaller ones, here’s how you can adjust it with Tailwind:

```html
<div class="columns-1 lg:columns-2 gap-5 text-justify">
  <img src="/resources/aqua.jpg" alt="Description of the image" class="float-left mr-4 w-36 h-auto">
  Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action. The text will start in the first column and flow into the second, maintaining a neat and tidy look.
</div>

```

This setup ensures:

- `columns-1` for a single column on smaller screens.
- `lg:columns-2` for two columns on large screens and above.

If there’s anything else you need or any more tweaks, just give me a shout! 😊

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [January 25, 2026, 7:20pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/42 "2026-01-25T19:20:29Z")

</div>

> [@elementsbot](#):
>
> `columns-1 lg:columns-2`

my earlier non-tailwind version worked. This is only producing 1 column no matter the screen width.

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [January 25, 2026, 7:20pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/43 "2026-01-25T19:20:35Z")

</div>

Hey ercross!

It sounds like Tailwind might be acting a bit shy. 😅 Let’s double-check the setup. Make sure Tailwind CSS is properly linked in your project. If it’s all set, here’s a quick recap of the Tailwind setup:

```html
<div class="columns-1 lg:columns-2 gap-5 text-justify">
  <img src="/resources/aqua.jpg" alt="Description of the image" class="float-left mr-4 w-36 h-auto">
  Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action. The text will start in the first column and flow into the second, maintaining a neat and tidy look.
</div>

```

This should give you:

- `columns-1` for a single column on smaller screens.
- `lg:columns-2` for two columns on large screens and above.

If it’s still not working, double-check your Tailwind setup or try clearing your cache. If you need more help, just holler! 😊

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2026, 7:42pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/44 "2026-01-25T19:42:01Z")

</div>

what about break inside

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [January 25, 2026, 7:42pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/45 "2026-01-25T19:42:04Z")

</div>

Hey upssjw!

Ah, the elusive `break-inside` property! It can be quite handy for controlling how content breaks within columns. If you’re looking to keep elements from breaking awkwardly, you can use it like this:

```html
<div class="columns-1 lg:columns-2 gap-5 text-justify">
  <img src="/resources/aqua.jpg" alt="Description of the image" class="float-left mr-4 w-36 h-auto break-inside-avoid">
  Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action. The text will start in the first column and flow into the second, maintaining a neat and tidy look.
</div>

```

The `break-inside-avoid` class helps prevent the image from splitting across columns. Make sure your Tailwind setup includes this utility, or you might need to add it manually.

If you need more help or want to tweak it further, just give me a shout! 😊

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2026, 8:17pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/46 "2026-01-25T20:17:23Z")

</div>

@ercross

basic, more controls for columns etc and layout

[elementsapp://downloadDocument/3Jh2ZC3fGsAi](elementsapp://downloadDocument/3Jh2ZC3fGsAi)

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [January 26, 2026, 12:15am UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/47 "2026-01-26T00:15:17Z")

</div>

Hi Steve,

I’m trying to do it using the Single Post component of the CMS with Markdown.

You’re example as a custom component works, but I don’t know how I could integrate that into the CMS.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 26, 2026, 7:15am UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/48 "2026-01-26T07:15:04Z")

</div>

apologies missed you initial post, yes you can use in a blog post, will the float and columns be your format for every post or only certain posts

this is the css version, just going to work now, so just an example, tailwind version slightly different

Try copying in the tailwind version, instead of the css version

If you wanted this as your template for every post you could do this a different way

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [January 26, 2026, 10:26am UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/49 "2026-01-26T10:26:50Z")

</div>

The CSS version works in the individual post, but the Tailwind version doesn’t.

I tried doing it on the Post template page using a custom component and using {{item.body}} to bring in the text, but that doesn’t seem to work. Not sure if that is supported or I ‘m just not using the proper syntax.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 26, 2026, 10:56am UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/50 "2026-01-26T10:56:57Z")

</div>

[https://sjwjaw.co.uk/blogsp/?item=today](https://sjwjaw.co.uk/blogsp/?item=today)

This is only testing pages not real website, I am only use one page this not two pages kind of menu structured through the pages icon

This page is using float custom component to pull in an image, title and body/text very minimum float code in here

Tailwind version requires add info to work in markdown

Not sure if this what you are trying to do

I have posted the entire project on this forum somewhere not sure if I deleted though if I can find in my bin I can post the project again

Collection and item create templates so this uses the same template in every post, wants to follow the template every post

Just need to add the column code to the custom component

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [January 26, 2026, 11:24am UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/51 "2026-01-26T11:24:16Z")

</div>

Hi Steve,

Yes that is exactly what I’m trying to do with the column code as well. Setting it in the template means less coding in the markdown file, so I’m perfectly fine with all the blog posts being formatted the same way.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 26, 2026, 11:25am UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/52 "2026-01-26T11:25:39Z")

</div>

I’m at work so no access to mac

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [January 26, 2026, 1:43pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/53 "2026-01-26T13:43:56Z")

</div>

Hi Steve,

No rush, I appreciate your help. I’m digging out of 20 inches of snow over here in Massachusetts.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 26, 2026, 6:54pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/54 "2026-01-26T18:54:53Z")

</div>

Component in project just copy to your project

ok no controls just modified quickly, it was just for testing

this is as much as I tested image or background just set to cms and size, then drop in the typography component and set to {{item.body}}

[elementsapp://downloadDocument/OGyHihA3NUFU](elementsapp://downloadDocument/OGyHihA3NUFU)

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [January 26, 2026, 7:46pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/55 "2026-01-26T19:46:30Z")

</div>

Hi Steve,

Thanks, I put the float component on the page and followed the instructions. It populates, but it is only showing one column. I looked in the html code and don’t see any column code. Am I missing something?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 26, 2026, 7:53pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/56 "2026-01-26T19:53:01Z")

</div>

I set lg:columns-2 so will not switch to 2 columns until it reaches that width see video the sm md lg are the blue dots in Elements

try changing lg: to sm: or md: remove lg: and replace with one of those

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 26, 2026, 8:44pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/57 "2026-01-26T20:44:06Z")

</div>

float column

[elementsapp://downloadDocument/qGEYzO19a7Hs](elementsapp://downloadDocument/qGEYzO19a7Hs)

very basic cms setup

I set up the typography a little

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [January 26, 2026, 10:32pm UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/58 "2026-01-26T22:32:54Z")

</div>

Hi Steve,

This was perfect and I like the added dividing line. This should make creating my markdown files much simpler, rather than having CSS code in them.

Will you be developing any Elements add-ons that will be available through the marketplace? Or is there a way I can send a donation?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 27, 2026, 7:47am UTC](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611/59 "2026-01-27T07:47:05Z")

</div>

No donation required

The component needs controls and additional structure, it was only for concept layouts

Just remember you are locked into the template, columns, you can still add images videos links lists through css html, but will always be in columns

[Previous page](https://forums.realmacsoftware.com/t/text-flowing-around-image/53611.md?page=2)