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

CSS3 Multiple Columns and position:absolute

I'm using CSS3 Multiple Columns. Inner elements have position:relative and can contain arrows with position:absolute. .clm3{ -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 0; -moz-column-gap: 0; …
Тимофей Петров
  • 133
  • 2
  • 5
7
votes
4 answers

Targeting nth column (made by column-count)

Let's say I have this
  • test
  • test
  • test
  • test
  • test
  • test
ul { column-count: 2; } and I want to align first column to right and the second to left, is there any…
fxck
  • 4,898
  • 8
  • 56
  • 94
6
votes
1 answer

Giving Right-Padding to Overflowing CSS Multi-Column Layouts

I'm creating a page flow that breaks up a sizable amount of content into columns that stack off to the right, as far as they need to. In other words, I'm trying to create a layout that only scrolls horizontally. This is easy enough with the CSS…
Violet
  • 183
  • 2
  • 7
6
votes
5 answers

CSS Columns will not horizontally align

I am using column count to allow my text to flow into two different columns but the top of the first column (leftmost) is lower than the other column? #col { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
Ronan Garrison
  • 89
  • 2
  • 8
6
votes
1 answer

Css columns height incorrect in Safari only

This code is working fine in Chrome/Firefox, but in Safari the content below my 3-column div is being pushed down much further than it should, as if the column content was condensed within a single column. This can be seen here:…
chrscblls
  • 585
  • 2
  • 7
  • 16
6
votes
1 answer

Additional margin over column using column-count with CSS3 and WebKit

I'm trying to use the column-count css3 property on an tag with multiple paragraphs in it. On Webkit browsers I'm seeing what appears to be a bug. At certain screen sizes, paragraph margins are failing to split across columns nicely. Here's a…
Mere Development
  • 2,439
  • 5
  • 32
  • 63
6
votes
3 answers

Multicolumn CSS does not work on print

I discovered multicolumn CSS for me, however found that when printing these styles are ignored. Is this a known bug? Or did I do something wrong? div { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; …
vp_arth
  • 14,461
  • 4
  • 37
  • 66
6
votes
1 answer

JQuery CSS setter not working in webkit when setting column-count property

I have an HTML ul that I generate dynamically using JavaScript. After I generate it, I set the style on said ul using JQuery's $('#id').css('property',value) method. This is what the code in question looks like: $('#actionSpace #datasetContent') …
thisissami
  • 15,445
  • 16
  • 47
  • 74
5
votes
2 answers

Have content in multi-columnn layout use all columns

I'm using the CSS multi-column layout for this layout: I want the content to use as many columns as possible. It does that in the above image, but when there's only 3 items, it does the following: I would like the box "3" to be to the right of…
Garrett
  • 4,007
  • 2
  • 41
  • 59
5
votes
2 answers

Using CSS Tooltips in a Multiple-Column DIV

I need to display tooltips for specific terms in a multiple-column div, and I need them to work across multiple browsers. I began with the w3schools CSS Tooltip example, which works great in a normal (single-column) container. But with multiple…
stek
  • 51
  • 4
5
votes
2 answers

column-fill: balance not working in Chrome?

column-fill: balance; is supposed to "divide content equally between columns". It seems to be working properly in Firefox and Edge. But Chrome (and Opera) seem to really dislike the second column, leaving it mostly empty. It seems to be related to…
recursive
  • 83,943
  • 34
  • 151
  • 241
5
votes
2 answers

How can I reorder a grid of columns?

What I have is a two-column layout with several items inside: .grid { column-count: 2; } .grid-item { break-inside: avoid; height: 50px; margin-bottom: 10px; background-color: green; text-align: center; line-height:…
sdvnksv
  • 9,350
  • 18
  • 56
  • 108
5
votes
1 answer

Prevent column-count from breaking elements' border

I'm creating a layout using column-count and -webkit-column-count but I found an issue that appears multiple times. As you can see from this image, Chrome 45 (not happening in FF) breaks elements' border, which is very strange and quite annoying.…
Vandervals
  • 5,774
  • 6
  • 48
  • 94
5
votes
2 answers

CSS column-count splitting my table into two different columns

I'm trying to create newspaper-like columns on my page. However, my page contains tables, and in IE, Chrome, Safari, and Opera, the table is being separated into two different columns;this is not the behavior that I want. Where there is a table, I…
J Fournier
  • 190
  • 3
  • 9
5
votes
3 answers

CSS column-count columns differ in height

I'm trying to create a masonry grid of images The general idea is to use column-count in to achieve this example. I have three columns with a bunch of images, and the CSS and HTML is identical to that in the link. The problem is that the columns…
Erik Honn
  • 7,576
  • 5
  • 33
  • 42
1 2 3
…
22 23