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

How can I make the CSS attribut of a Div to change when there is a text overflow on another Div?

I'm building a Div with column-count = 2, column-fill = auto, and a height = 100%. This Div will contain some other Div with text inside. However, I want my page to be fluid and adapt automatically when the window get shorter in order that…
Douglas
  • 5,229
  • 3
  • 43
  • 54
1
vote
1 answer

Images falling outside css columns on iOS

I am using CSS columns to display images of assorted widths and heights so that they flow together without large white spaces. It works perfectly on desktop browsers, but on iPad and iPhone (using iOS Chrome), the last images in the list fall…
lukenjohnson
  • 113
  • 1
  • 10
1
vote
0 answers

CSS Multi Column - Safari/Chrome bug

I was trying to make a Pinterest type layout using only CSS3 Multi Column code, which is as follows: #columns { overflow: hidden; -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-column-width:…
Da Moose
  • 111
  • 1
  • 14
1
vote
1 answer

How to change the text-flow direction of CSS multi-column paragraphs from "horizontal" to "vertical"?

Given: a clean page with one
containing some

paragraphs and a full width . I want the css multi-columns to flow not as in A, but as in B sothat the paragraphs flow from top-to-bottom and then from left-to-right. The should…

Sam
  • 15,254
  • 25
  • 90
  • 145
1
vote
1 answer

Prevent column wrapping in unordered list, align list items to top of column

I have an unordered list that contains several list items, split into 4 columns - Image below. I'm having trouble getting the list-items at the upper level - The ones that have the images next to them in the image example - to break the column and…
schizoid04
  • 888
  • 1
  • 11
  • 27
1
vote
0 answers

Safari does not render the height of div when using CSS3 columns and Boostrap

I have an issue with Safari 10.0.3 while working with CSS3 columns and Bootstrap. It does not render the height of the div correctly (actually displays with no height) Turning off the css for columns and content displays as normal in one column with…
Nick Lewis
  • 33
  • 4
1
vote
1 answer

Take control of text styled with css columns attribute

Ingredients: a div containing some text which we don't know the length of. What we know about the text is just it contains some keywords, 'mango' for example, and those keyword must placed at the start of a new column (like those keyword are…
operator
  • 247
  • 1
  • 3
  • 15
1
vote
1 answer

Flexbox with multicolumn columns property, bug in Firefox?

Is this a bug in Firefox? It looks well in Chrome or if I remove columns: 2 then it also works in Firefox. div { width: 500px; padding: 2rem; display: inline-flex; align-items: baseline; border: 1px solid red; } h1, p { …
user7691306
1
vote
0 answers

Columns with 'overflow: scroll' hiding content after certain point

I'm trying to create a CSS theme for a blog (which I cannot change the HTML of). I want to make the entries go in columns (of which there is no set number), and have a horizontal slide to be able to slide through the posts; the columns will be the…
C. Yang
  • 41
  • 1
  • 7
1
vote
1 answer

How can I sort blocks horizontally inside a two-column div?

I'm customizing a Wordpress theme to display new articles on home page in two columns instead of one. I'm probably not doing it right as I use column-count property, which I guess should be use to split text, not arrange blocks layout. …
mxdsp
  • 209
  • 2
  • 9
1
vote
2 answers

How to make the starting height of two columns the same?

In my demo (http://jsfiddle.net/pdExf/864/), the starting position of the fourth element is higher than that of the first. How do I fix this? Snippet: span { margin-left: 14px; flex: 1 1 auto; overflow: 'hidden'; word-wrap:…
TheRealFakeNews
  • 7,512
  • 16
  • 73
  • 114
1
vote
2 answers

How to make CSS3 column displays work in IE9

This works in FF/Chrome/Opera, and IE 10+, but not IE9; I'm looking for an IE9 solution The following CSS will to make a set of divs, span, or p tags self-organize into neat columns that can be scrolled horizontally (Only works in WebKit enabled…
namretiolnave
  • 781
  • 1
  • 9
  • 25
1
vote
1 answer

CSS columns with elements that expand

I would like to use css columns to arrange a list of items into three columns. When I click on certain items, I will use JS to expand them, and when that happens I don’t want the layout be adjusted to compensate. Is this…
launchoverit
  • 4,807
  • 4
  • 20
  • 23
1
vote
1 answer

css break column before element without breaking the wrapper

My desired result, always break before a specific element, h2 in this case: https://jsfiddle.net/hv0sm40o/3/ html

Jelly pastry chocolate cake pastry

Marshmallow cake pie carrot cake donut lemon drops. Candy canes…

Jens Törnell
  • 23,180
  • 45
  • 124
  • 206
1
vote
2 answers

Why does a 3 column layout fail so hard?

In the first snippet, you should see 4 images grouped to just the left 2 columns: [+][+][  ] [+][+] and not spread across all 3 columns as I would have expected: [+][+][+] [+] Worse yet, even 3 items in a 3 column layout fails! I get this in…
calipoop
  • 792
  • 9
  • 31
1 2 3
…
22 23