text that flows from one column to the next

[wirefoxterrier]

Hello,

i work a lot with indesign and unfortunately i am not very familiar with text design options in laytheme. I need a way to split text into two columns. I would like the text to flow from one column to the next, depending on the browser dimension. Is there anyone who can help me with this?

Greetings, (another) Armin

[arminunruh]

https://developer.mozilla.org/en-US/docs/Web/CSS/columns
https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap

In the gridder, right click on the element and choose "set html class and id". For "html class" enter:

mycolumns

Enter the custom css in "lay options" -> "custom css & html".

.mycolumns{
    columns: 2;
    column-gap: 20px;
}

[wirefoxterrier]

@arminunruh Thank you so much! This was really easy.

[wirefoxterrier]

@arminunruh

Hey Armin, sorry – one more question about this. I worked with this code and everything seemed fine with Firefox.

With Safari, the columns break if you open and close several 'collapsed' rows that include the two-column script.

Please see for yourself: https://arminlorenz.net/home/home-copy/

Is there any way to fix this?

Thank you!
Armin

[arminunruh]

try this:

.mycolumns>div{
    columns: 2;
    column-gap: 20px;
}

instead of the previous css!

[wirefoxterrier]

@arminunruh Thank you! Much better now.