# Columns float light version

**URL:** <https://forums.realmacsoftware.com/t/columns-float-light-version/46463>\
**Category:** API\
**Created:** [February 25, 2025, 5:41pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463 "2025-02-25T17:41:36Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [February 28, 2025, 12:17am UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/21 "2025-02-28T00:17:49Z")

</div>

its just under columns setup, I just used a section of tailwinds sizes as per their website, see below

---

<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:** [February 28, 2025, 12:23am UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/22 "2025-02-28T00:23:52Z")

</div>

added a lot more text

---

<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:** [February 28, 2025, 12:32am UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/23 "2025-02-28T00:32:15Z")

</div>

I did have all these sizes in but didn’t do that much

([columns - Layout - Tailwind CSS](https://tailwindcss.com/docs/columns))

---

<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:** [February 28, 2025, 12:47am UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/24 "2025-02-28T00:47:36Z")

</div>

can use images, adjust columns different layout

---

<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:** [February 28, 2025, 1:15am UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/25 "2025-02-28T01:15:08Z")

</div>

I took out the ability to add a number of columns I can add it back in if you would like that not a problem

---

<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:** [February 28, 2025, 1:53pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/26 "2025-02-28T13:53:49Z")

</div>

this version has more options including css col numbers and widths, not completely finished but works

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

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [February 28, 2025, 2:54pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/27 "2025-02-28T14:54:33Z")

</div>

Hi @upssjw,

just curious. How did you add the images? Like `Typography` + `Image` + `Typograhy`?

---

<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:** [February 28, 2025, 4:38pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/28 "2025-02-28T16:38:06Z")

</div>

did you mean this or other videos using float around images

As I said before I just write without thinking, so I need to go back and rewrite everything just waiting until Elements can create a component

---

<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:** [February 28, 2025, 5:02pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/29 "2025-02-28T17:02:59Z")

</div>

or did you mean this one

[https://forums.realmacsoftware.com/t/columns-float-light-version/46463](https://forums.realmacsoftware.com/t/columns-float-light-version/46463)

---

<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:** [February 28, 2025, 5:26pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/30 "2025-02-28T17:26:04Z")

</div>

I have added video, and Elements component, gallery works but you have to use flow fix to stop it going across two cols

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [February 28, 2025, 6:10pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/31 "2025-02-28T18:10:31Z")

</div>

I meant this one:

 ![CleanShot 2025-03-01 at 02.09.59](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/3/034b11adec386c5df0462d235b415c189b2cd072.jpeg)

---

<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:** [February 28, 2025, 6:31pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/32 "2025-02-28T18:31:51Z")

</div>

I just applied padding to the typography the video and image just expand into the column no padding etc applied

 ![CleanShot 2025-02-28 at 18.29.51@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/0/20153622f9d4524856a0d07c71eca88c9b2ad3e6.jpeg)

the drop zone in columns just drop in what ever and apply layout to each component

---

<div class="post-metadata">

**Author:** ![paulcruice](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@paulcruice](https://forums.realmacsoftware.com/u/paulcruice)\
**Post date:** [February 28, 2025, 10:03pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/33 "2025-02-28T22:03:53Z")

</div>

Don’t fully understand how it works, but if you think that will help, yes please.  
Cheers,  
Paul

---

<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:** [March 1, 2025, 8:47am UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/34 "2025-03-01T08:47:23Z")

</div>

@paulcruice if you let me know how many columns you need eg 5 but reduce etc for different screen sizes, or if they have to be a certain width say 350px or what ever I will set up a container you can just copy into your page might help you see how it works

---

<div class="post-metadata">

**Author:** ![paulcruice](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@paulcruice](https://forums.realmacsoftware.com/u/paulcruice)\
**Post date:** [March 1, 2025, 9:21am UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/35 "2025-03-01T09:21:00Z")

</div>

Steve, let’s say 5 columns is sufficient but I need the ability to vary the width of each column. I have been able to use Dan’s method of transferring to my file, so container won’t be necessary.

---

<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:** [March 1, 2025, 1:10pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/36 "2025-03-01T13:10:57Z")

</div>

do you mean 5 columns varying the width of each individual column with a different width or just 5 columns with say 200px widths

---

<div class="post-metadata">

**Author:** ![paulcruice](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@paulcruice](https://forums.realmacsoftware.com/u/paulcruice)\
**Post date:** [March 2, 2025, 4:00am UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/37 "2025-03-02T04:00:09Z")

</div>

Steve,

Sorry for the delay but I’m not a programmer, so had to have a think about how to reply to you. Since I don’t know the limitations/interactions of Tailwind Columns, I have to express things the way I understand them. I hope the meaning gets through to you.

I envisage:

1. An ability to **first** set the number of columns on a page or in a Container of, say, a smaller size. I don’t need any more than 5 columns. Should be able to set from 1 to 5 columns. Columns to be of equal width. Most of the time I would use 4 columns.

2. Minimum width of a column = 50mm. Max width = one column across the width of the screen.

3. The ability to adjust the gaps between columns. Max gap width probably 20mm.

4. The ability to add a divider between the columns, with thickness and colour adjustment.

5. Ability to add a Border of set thickness and colour, top/bottom/left/right/none

6. The ability to adjust the Padding between the border and the outside of the columns.

7. Ability to set break points for small screens.

8. Ability of text to automatically reflow as these changes are made.

I think I have covered it all. Don’t know if this makes it worse or better for you.  
Finally, I have no idea what Flow Fix does nor where it is placed nor how it works.

Cheers.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 2, 2025, 3:44pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/38 "2025-03-02T15:44:43Z")

</div>

Hey @paulcruice

Had a spare half hour so though I’d take a crack at making a custom coloumns component for you 😆

It’s not perfect, but it does work, [here’s the project](elementsapp://downloadDocument/ROHT9CKD1Qst), and here’s a video demoing it…

Oh, and you can drop multiple components into the columns, although I’ve not tested that much. Have fun!

---

<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:** [March 2, 2025, 5:05pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/39 "2025-03-02T17:05:17Z")

</div>

just beat me to it

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 2, 2025, 8:42pm UTC](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/40 "2025-03-02T20:42:02Z")

</div>

@upssjw haha, yours looks much more in-depth than my component — Nice work 🤩

I’m sure @paulcruice will want to use your new version!

[Previous page](https://forums.realmacsoftware.com/t/columns-float-light-version/46463.md?page=1)

[Next page](https://forums.realmacsoftware.com/t/columns-float-light-version/46463.md?page=3)
