Stack Overflow
Stack Overflow

Questions tagged [css-multicolumn-layout]

The Multi-Column Layout module in CSS allow users to layout their content in a column format, based on a number of different properties.

The Multi-Column Layout module in CSS allows users to layout their content in a column format, based on a number of different properties.

This includes setting a column count or a column height, to automatically split content to fit, as well as setting a column gap, to control spacing, and more.

Read the W3C Specification:
https://www.w3.org/TR/css3-multicol/

Read the guide on MDN Web Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

344 questions
1
vote
0 answers

Why is column-count rendering thin lines in Chrome on 4K screens?

I have found an odd rendering issue in Chrome when it deals with the column-count property on high resolution screens. I am seeing this on a 4K screen. body { background-color: #30271d; font-family: arial, sans-serif; …
Joe Wright
  • 11
  • 2
1
vote
1 answer

page-break-inside:avoid does not work as expected in Firefox?

I have some legacy code that I am working on that utilizes column-count: 2 with a break-inside / page-break-inside of avoid on the child elements. This works as expected when there is more than 1 child, but when there is only one child, the element…
lfitzgibbons
  • 783
  • 1
  • 5
  • 18
1
vote
1 answer

css: four column width

I have a simple page What I want is to spread columns over the row. Is it possible to achieve this goal within this scheme? I think it is quite useful to use w-100 classes within single row to build multi-column grid. Isn't it?
GHopper
  • 366
  • 4
  • 15
1
vote
1 answer

How can I make text use the entire first column before using the next one?

I'm using the multi-column layout in CSS to divide some text into two columns. It seams like CSS tries to keep the number of rows of text in the two columns the same, but I would instead like the entire first column to be used up before the text…
Istlemin
  • 131
  • 2
  • 11
1
vote
3 answers

column-count not splitting on short columns in Chrome

EDIT: I've removed the
tags that several people pointed out may be causing the issue and recreated the same layout with more correct CSS, which I've included below (using width:100% on the labels instead of a break), but am still getting the…
Sinister Beard
  • 3,570
  • 12
  • 59
  • 95
1
vote
3 answers

Have a paragraph flow around another paragraph, in 4 columns

I am splitting 4 column dynamically with adjustable height. But I want first paragraph in 2 columns and remaining paragraph separated by 4 columns. This is what I've tried: .column-4 { -webkit-columns: 4; -moz-columns: 4; columns: 4; …
Balamurugan
  • 137
  • 1
  • 1
  • 13
1
vote
1 answer

Force CSS Column Widths

I'll preface this by saying that CSS Columns may not be the best way to accomplish when I'm trying to do, but it's the closest thing that I've found thusfar. I'm open to other recommendations. My goal is to create a horizontally-scrolling reader…
doubleJ
  • 1,190
  • 1
  • 16
  • 29
1
vote
1 answer

right to left 2 columns paragraph

I am trying to use the column-count CSS property, it's working fine but what I want is to make it show the content from right to left. I want the starting column "Column One" to be on the right. How?
robin geagea
  • 79
  • 1
  • 11
1
vote
0 answers

split div in two rows like multi column CSS property

Is there any solution to split content of a div automatically in multi rows? (like when we using multi column CSS properties to split a div in multi columns)
Ahmad
  • 109
  • 1
  • 11
1
vote
1 answer

break-inside: avoid not working with padding in edge

I have a problem to get a column-layout to work correctly with block elements that contain paddings. The problem I'm facing is, that a thin line of white background from the first column breaks into the beginning of the second column. It occurs in…
Akerus
  • 363
  • 2
  • 16
1
vote
1 answer

Flexbox wrapping - scrolling disappear with 100vh body

I'm building a multi-column page layout with flexbox, for a bit af responsive feel. This is my code. Index …
LppEdd
  • 20,274
  • 11
  • 84
  • 139
1
vote
1 answer

Allow content to overlap multi-column layout

I'm trying to allow content to overlap multiple columns, ignoring the boundaries set by the multi-column layout properties. The problem is that regardless of position, overflow or z-index, the columns will never allow content from a previous column…
D-Money
  • 2,375
  • 13
  • 27
1
vote
2 answers

Absolutely positioned tooltip over Multi-column Layout

I'm trying to add absolutely positioned tooltips to a simple CSS three column layout - but the tooltip always gets cut off by subsequent columns. The tooltip also breaks across columns if it runs above or below the upper or lower limits of the…
D-Money
  • 2,375
  • 13
  • 27
1
vote
0 answers

css columns add extra space at bottom

I've got css columns in effect (in wp). I'm getting extra space below the content. The height of the extra space matches that of the paragraph that has been moved over to the 2nd column, as if the browser is thinking that paragraph is not in a 2nd…
markw
  • 41
  • 5
1
vote
2 answers

How can I keep item-count (dynamic) from breaking inside CSS columns?

There's column-count, but I'm wondering is there such thing as "item-count" for items inside a CSS column? I'm having trouble trying to keep the number of items fixed in my 3 Column FAQs without specifying height to the column itself. In this…
Carlo
  • 11
  • 2
1 2 3
…
22 23