# Columns practice **URL:** \ **Category:** Elements API\ **Created:** [November 13, 2024, 7:23pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259 "2024-11-13T19:23:17Z")\ **Posts on this page:** 20\ **Page:** 2
**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:** [November 17, 2024, 3:41pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/21 "2024-11-17T15:41:33Z")
further progress, removed as much as I can from the code, rely now on Elements Added switch between tailwind columns and px width, all responsive (fingers crossed) still working through Tailwind docs > **[Columns - Tailwind CSS](https://tailwindcss.com/docs/columns#basic-usage)** > > Utilities for controlling the number of columns within an element. download Columns Component here with the examples shown [elementsapp://downloadDocument/jR3GvKC5vZqM](elementsapp://downloadDocument/jR3GvKC5vZqM) ---
**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:** [November 17, 2024, 6:14pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/22 "2024-11-17T18:14:18Z")
@dan background colour container does not work in my columns ---
**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:** [November 17, 2024, 6:31pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/23 "2024-11-17T18:31:24Z")
@dan works ok in Element but not in safari set a background for columns and that works in safari just the Container does not work ---
**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:** [November 18, 2024, 9:31am UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/24 "2024-11-18T09:31:22Z")
Nice work 🤩 I know a few potential Element users wanted flowing column support and this looks super good 🙌 I wonder if the color not showing is just a coding error, or the browser being awkward - does it work in Chrome? ---
**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:** [November 18, 2024, 9:49am UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/25 "2024-11-18T09:49:06Z")
@dan could we’ll be a coding, I added an option to but a background colour directly into the columns that works. It is just the container element that does not work if I use a background colour directly in the columns it works in safari, it’s the container does not work. Columns work in safari and chrome but not the container. If I set my own container it works. I will replicate in tailwind play and see if it works in there. ---
**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:** [November 18, 2024, 10:01am UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/26 "2024-11-18T10:01:31Z")
Good stuff, let me know how you get on! ---
**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:** [November 18, 2024, 12:46pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/27 "2024-11-18T12:46:15Z")
@dan created it in tailwind play no issues just using outer div as a container copied from tailwind play into Elements no issues ---
**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:** [November 18, 2024, 12:55pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/28 "2024-11-18T12:55:22Z")
@dan strange behaviour with borders as well ---
**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:** [November 18, 2024, 2:45pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/29 "2024-11-18T14:45:23Z")
@dan added own controls to columns and it works ---
**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:** [November 18, 2024, 5:03pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/30 "2024-11-18T17:03:44Z")
Any idea why when dropping in an Elements container width background and borders go haywire ---
**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:** [November 18, 2024, 5:12pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/31 "2024-11-18T17:12:53Z")
@dan the colour is from Elements container background colour ---
**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:** [November 18, 2024, 5:13pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/32 "2024-11-18T17:13:17Z")
Seems like a code issue, something clashing… but it’s hard to tell without seeing the code… Maybe share the project again showing the issue and we can have a little look! ---
**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:** [November 18, 2024, 5:23pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/33 "2024-11-18T17:23:18Z")
@dan the link is about 12 posts up [elementsapp://downloadDocument/jR3GvKC5vZqM](elementsapp://downloadDocument/jR3GvKC5vZqM) add padding to container then set width to full set background colour in the container ---
**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:** [November 18, 2024, 5:53pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/34 "2024-11-18T17:53:02Z")
@dan not sure what is going on here but looking at view source on the safari page I can do this ---
**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:** [November 18, 2024, 6:25pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/35 "2024-11-18T18:25:19Z")
Ah-ha! You’ve got too many closing div tags, remove one and it works just fine ☺ Here’s a quick video explaining the change… ---
**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:** [November 18, 2024, 6:29pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/36 "2024-11-18T18:29:12Z")
@dan Simple things I had another div at the start to try something else, forgot to remove the closing div, can finish now thanks for spotting I was about to remove one bit at a time ---
**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:** [November 18, 2024, 7:05pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/37 "2024-11-18T19:05:36Z")
@dan now it is starting to get there download below [elementsapp://downloadDocument/zAe71z02dwoh](elementsapp://downloadDocument/zAe71z02dwoh) ---
**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:** [November 18, 2024, 7:21pm UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/38 "2024-11-18T19:21:23Z")
Working in a page ---
**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:** [November 19, 2024, 6:40am UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/39 "2024-11-19T06:40:17Z")
blank Columns component [elementsapp://downloadDocument/urqkh4hpi7to](elementsapp://downloadDocument/urqkh4hpi7to) Didn’t add all of the classes to the notes Columns Options to add to Elements components if required Break After break-after-auto break-after-avoid break-after-all break-after-avoid-page break-after-page break-after-left break-after-right break-after-column Break Before break-before-auto break-before-avoid break-before-all break-before-avoid-page break-before-page break-before-left break-before-right break-before-column Break Inside break-inside-auto break-inside-avoid break-inside-avoid-page break-inside-avoid-column ---
**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:** [November 19, 2024, 11:22am UTC](https://forums.realmacsoftware.com/t/columns-practice/45259/40 "2024-11-19T11:22:11Z")
Still need to add a few more options [Previous page](https://forums.realmacsoftware.com/t/columns-practice/45259.md?page=1) [Next page](https://forums.realmacsoftware.com/t/columns-practice/45259.md?page=3)