Can’t get a note with a precise number of columns with CSS

[tb87]

I’m trying to format a note with a n-column layout but somehow, in preview mode, my note has >n columns.

MWE:

---
cssclass: three-columns
---

Lorem ipsum dolor sit amet [...]

with columns.css defining

.three-columns {
    columns: 3;
}

Result:

Actually, the note now has 5 columns. Interestingly, when there is less content the note has three columns ; this behavior only appears when the content “overflows” the screen — instead of continuing below (keeping three columns fixed) an additional column is created, and so on.

Any hint about what is wrong here?

[anon12638239]

Does ‘column-count’ work?

.three-columns {
  column-count: 3;
}

W3Schools online HTML editor

Angel

[tb87]

column-count doesn’t work either — same behavior.

I’ve also tried disabling every core/community plugin to be sure, and appending !important to the CSS line, doesn’t work neither.

[anon12638239]

A div class applied to the text / element in the file should work:

<div class="three-columns">
Lorem ipsum dolor sit amet ...
<div>

Angel

[dddave]

I use columns with a ul and it works well. May not work for your use case, but sharing code just in case.

Frontmatter:

cssclass: ul-four-columns

CSS:

.ul-four-columns ul {
  columns: 4;
  list-style-type: none;
  padding: 0px;	
  font-size:115%;
  text-decoration: none;
}

You can remove all the css except columns, I just left it because for an example.

Data in note:

• Item 1
• Item 2
• Item 3
• Item x
• Item x
• Item x

[tb87]

It works but for the first paragraph only ; as soon as there is a line break the text resumes in 1 column mode.

Moreover, I thought markdown inside HTML tags didn’t work but it seems to work inside <div>, however trying to write multiple paragraphs inside <p> breaks the markdown codes.

Is there another way to get multiple paragraphs under the same 3-column layout?

[tb87]

Thanks, I also have a snippet for lists with multiple columns but in the present case I’m looking for a general solution that does not only apply to lists (I have titles, subtitles, a bunch of links, some dataview code, and lists).

[tb87]

Tried setting height too:

.three-columns {
    columns: 3;
    height: auto;
}

and now the content is restricted to 3 columns as intended, but Obsidian won’t scroll past the size of the screen: