#1

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:

image
image1920×1663 376 KB

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?

1 Like
#2

Does ‘column-count’ work?

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

Angel

#3

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.

#4

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

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

Angel

#5

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
#6

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?

#7

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).

#8

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:

image
image1864×1768 401 KB

1 Like
#9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.