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
5
votes
1 answer

Why is my multi-column spacing not working in Chrome?

My CSS columns are displaying differently in Chrome from how they're displaying in Firefox and IE9. This is the correct display in Firefox: Here's how it displays incorrectly in Chrome: I've tried changing the li to display: inline-block, which is…
harriyott
  • 10,505
  • 10
  • 64
  • 103
5
votes
2 answers

Auto Create Columns Using Single Plain List

I am trying to write flexible code where I have one plain
    which gets automatically creates another column for every 5th element. I have found a tutorial that achieves this but places the items in a horizontal order whereas I require a vertical…
Jon
  • 8,205
  • 25
  • 87
  • 146
4
votes
2 answers

Prevent element fragmentation in multi-column layout

Given this code: #wrapper { border:2px solid red; padding:10px; width:310px; height:310px; -webkit-column-width:150px; -webkit-column-gap:10px; -moz-column-width:150px; -moz-column-gap:10px; column-width:150px;…
Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
4
votes
5 answers

Glitch in hover state when links are broken into multiple CSS columns

When there is a list of links and you apply the 'column-count' CSS property to the container and you hover slightly below the last link in the first column (link 3 in the example) then the hover state will apply to the first link in the second…
tay
  • 138
  • 2
  • 13
4
votes
1 answer

JavaScript for breaks in multi-column layout

I'm using the multi-column CSS layout in a fixed height element so the browser creates as many columns as it needs to contain the content. New columns will always appear to the right of the other columns, but I would like to break after three…
brendan
  • 45
  • 3
4
votes
3 answers

Prevent CSS `column-span: all` shunting to bottom of page

I have a multi-column div (2-4 columns depending on a setting in my app) generated live by user-provided markdown in a text editor. In some cases, they want to manually insert column breaks. To achieve this, I provide a Markdown snippet that…
Trevor Buckner
  • 588
  • 2
  • 13
4
votes
4 answers

Flexbox columns in ascending order

I'm working with some items in a list:
  • Item1
  • Item2
  • Item3
  • Item4
  • Item5
  • Item6
  • Item7
  • Item8
and I'm trying to get them to break into two columns using…
ultraloveninja
  • 1,969
  • 5
  • 27
  • 56
4
votes
1 answer

List with columns gives hover effect on wrong items in Webkit/IE

Today I ran into the following problem: When using a list with multiple columns as shown in the snippet, where the list items have a margin-bottom set to them, Chrome doesn't render the bottom of the columns correctly, sending hover-events to the…
Joeytje50
  • 18,636
  • 15
  • 63
  • 95
4
votes
1 answer

Multi column layout in CSS that first fills first column and prints correctly to multiple pages

I want to build a multi-column layout that prints nicely. My goal is that some content is split in 3 columns and the tricky aspect: that at the end the content first tries to fill column #1 before going to #2 and #3. This layout should be printable…
AlfaTeK
  • 7,487
  • 14
  • 49
  • 90
4
votes
4 answers

Column count cuts image in half

I have a large section of text on a page and when the screen is larger, I have media queries to make the text form columns. However, when I do this, some of the photos don't fully go to into one column. For whatever reason it will split the photo…
Sensoray
  • 2,360
  • 2
  • 18
  • 27
4
votes
1 answer

chrome and safari render css columns differently when number of items equals number of columns

I've got a directory listing that uses CSS columns but behaves differently in Chrome and Safari. Each section of the directory has a wrapper that arranges the listings into two columns. I've got the CSS so Chrome renders it the way I want: In…
calebtr
  • 200
  • 7
4
votes
2 answers

Insert column break in css3 column

Is there a way to insert a column break in HTML content using CSS column style, like
,
or something else? E.g. you have heading than paragraph than heading than paragraph than heading than paragraph etc, and you want to insert a break at…
Gevorg Hakobyan
  • 328
  • 3
  • 14
4
votes
0 answers

Why does Chrome sometimes use only 2 out of 3 columns in my layout?

I'm trying to create a Pinterest look of 3 columns for my WordPress posts. I'm using column-width and column-gap according to this example: https://codepen.io/dudleystorey/pen/yqrhw body { min-height: 1000px; } #columns { column-width:…
Rachelbt
  • 357
  • 3
  • 8
4
votes
1 answer

Make inline-block with columns to have right width

Want to make inline-block with horizonlal columns. I need each inline-block to have width as minimal number of columns to fit content. The problem is strange columns processing by browser. div { height: 10em; border: 1px solid red; …
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
4
votes
2 answers

How do you style text that overflows?

I have an unordered list in column format that is populated dynamically, usually with just one or two words per
  • , but occasionally a longer list item appears. In order to preserve my columns, I have chosen to hide the excess text of these longer…
    • MrMcPlad
    • 280
    • 3
    • 7
    1 2 3
    …
    22 23