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
2
votes
3 answers

CSS3 multi-column breaks images into several parts

I'm implementing an epub reader in iOS platform. I have paginated the HTML files using a CSS multicolumn layout. It works fine on pure-text HTML files, but when loading images, the images will be separated into several pages. Here is my multicolumn…
Oscar
  • 651
  • 5
  • 13
2
votes
1 answer

Center last li element if column count is 2

I want to make a footer for mobile resolution. If there is only one element in one row I want to center it - can I achieve this using ul li ? My last element is being aligned to left, which I don't want, should I use something else than ul…
Dave
  • 1
  • 1
  • 9
  • 38
2
votes
2 answers

Why does my column gap get smaller when I increase the width of my container?

I'm having a hard time understanding the logic behind the column gap in a multi-column layout. I have the following HTML/CSS in this Fiddle:
1
Garrett
  • 4,007
  • 2
  • 41
  • 59
2
votes
1 answer

Fixed column gap css

I am trying to make a layout where divs fall into a columns each with width 250px, so wider screens have more columns. I also want the gap between the columns to remain the same in this case 5px. The problem is when I readjust the width of the…
stitchers
  • 21
  • 1
2
votes
1 answer

CSS Columns that Overflow Below

In creating a multi-column, snaking layout, using CSS Columns, it seems content wants to naturally overflow to the right. I'm looking for a solution that will overflow below the fixed height of the parent container. For example: This is the natural…
Nikolnikov
  • 21
  • 2
2
votes
1 answer

With a fixed column-count, the next item should go to next column after a fixed no of items have already been added in previous column

I have got multiple lists, and as most of the lists are bigger, so I decided to set column-count: 3 (this is giving good UI for my lists in general). Now one issue comes, What if my list-items (in some cases are very less, say only 10). In that…
Deadpool
  • 7,811
  • 9
  • 44
  • 88
2
votes
1 answer

How to fix Chrome bug with CSS column-count?

It there any solution for column-count in Chrome? In Firefox it works: In Chrome not: Codepen: https://codepen.io/online123/pen/qBbErZg The .box will have different height (depends on text, images inside). .box width is and should stay static…
online123
  • 66
  • 9
2
votes
0 answers

CSS columns: column width depending on max item length per column

I want columns width to be dynamic. article{ columns: 2; width: 100%; } div{ border: 1px solid red; }
A
B
C
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
As seen above,…
vsync
  • 118,978
  • 58
  • 307
  • 400
2
votes
2 answers

Why does overflow:hidden break multiple column rendering in Firefox but not in Chrome?

I recently stumbled across a strange behavior in Firefox with lists in an columns:2 div. If the list has overflow:hidden set Firefox doesn't render in 2 columns anymore. rendering in Chrome it is as expected in 2 Columns (with and without…
Ingo
  • 23
  • 6
2
votes
2 answers

How to fix column-gap issue with CSS

Why is the column-gap specification not working in this example? I get what looks like columns that are horizontally justified. I want the elements in each column to have a maximum width. #col { column-count: 2; column-gap: 0; } #col p { …
Jason S
  • 184,598
  • 164
  • 608
  • 970
2
votes
1 answer

Flexbox - Variable Number of Columns Problem

I'm trying to aim for a responsive design wherein a long list of links is arranged in columns, the number of columns varying according to the width of the display device screen. As I understand it, I must specify the height of the container to get…
Oswulf
  • 41
  • 3
2
votes
4 answers

CSS columns hide ::before element with absolute position extending his own column

on my site, I have triangles maded from borders of pseudo element :before. My problem is, if i add these triangles to elements in columns (column-count), triangles in not first column are hidden under previous column. Columns have column-gap set. I…
Jakub Med
  • 23
  • 6
2
votes
2 answers

CSS columns: fill row first

I'm trying to do a pinterest-style layout with css3 columns. This is my code so far: .column-container { width: 100%; column-count: 4; column-gap: 5px; padding: 0; margin: 0; } .column-container > * { width: 100%; display:…
BackSlash
  • 21,927
  • 22
  • 96
  • 136
2
votes
0 answers

When using jQueryUI .sortable() & CSS Multi-Column layout, part of an item moves to next column

I am using jQuery UI .sortable() on an unordered list to split a list into multiple columns. I would like the first column to be filled first based on the height of it's container before populating the next column, which seems to be working.…
Kezz
  • 193
  • 1
  • 7
2
votes
1 answer

“display: flex” inside "column-count" renders single column in Firefox & IE

I need to have a two-column layout and two columns again inside each colunn. I used following code that renders nice on Chrome and Safari, but in single column in Firefox and IE: What am I doing wrong? .two-columns { column-count: 2; dt, …
Sven
  • 41
  • 6
1 2 3
…
22 23