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

Really bizarre flaw found in CSS columns

So I was playing around with columns and stumbled on a really strange flaw when I incorporated a hover-over image. On the left side of the column, the hover-over effect works completely fine. ...but on the right side of the column, the hover-over…
kenhimself
  • 267
  • 4
  • 14
4
votes
1 answer

How can I force an odd column-count when I have an even number of columns?

I've got a columns class that sets the number of CSS columns to three. This looks like the following: .columns { column-count:3; -moz-column-count:3; -webkit-column-count:3; }
  • Apples
  • Grapes
    • …
Arthur
  • 1,332
  • 2
  • 19
  • 39
4
votes
2 answers

Why is my column-count not working with Bootstrap in Chrome?

I tried displaying multiple buttons in columns using .columnized { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } and markup

4
votes
3 answers

CSS column layout has an incorrect column-count

I'm trying to make responsive layout with columns but in some cases their count is changing. I've set column-count:3 but when I have 4 divs they are positioned 2x2 not 3x1. The same bug occurs when I have 7 columns and so on. #content { …
user370306
3
votes
0 answers

CSS columns & text wrapping - Is it possible to set individual column widths?

I'm using CSS columns because I'm in a situation where I need text to automatically overflow from column to column so that both columns always shake out to be about the same height. The design asks for the left column to be 40vw and the right to be…
Jacksonkr
  • 31,583
  • 39
  • 180
  • 284
3
votes
2 answers

Split table into css columns, issue in Firefox

I have a table which should be divided into two columns (layout columns, not table columns). Works fine in all major browsers, except Firefox, which doesn't break the table into two columns. .column-layout { columns: 2; }
Mikel Wohlschlegel
  • 1,364
  • 1
  • 11
  • 23
3
votes
3 answers

How can I order CSS columns horizontally instead of vertically for auto height elements?

Each of my columns has different heights. How can I order my column to horizontally instead of vertical using CSS? Also on hovering of each item, the height will increase a little bit without overlapping below items. .parent{ /*display: flex; …
Rajilesh Panoli
  • 770
  • 10
  • 17
3
votes
1 answer

CSS - How to sort inline-block in vertical top to bottom instead of left to right?

I've got a set of divs displayed in 5 columns using display: inline-block. I want them to stack like this: 1 5 2 6 3 7 4 8 Instead of: 1 2 3 4 5 6 7 8 What I have so far: #parent { width: 1200px; } .withchild { display:…
Joe
  • 199
  • 1
  • 1
  • 15
3
votes
2 answers

How to remove gap in second column of a CSS grid?

I'm having difficulties in my simple CSS column. Here's what it looks like: HTML:
wobsoriano
  • 12,348
  • 24
  • 92
  • 162
3
votes
2 answers

CSS column layout hide empty columns

I've done a few things with css columns and I really like them, but today I stumbled into a problem for which I just won't find a solution: I have a page with multiple lists. These lists have dynamic contents and open up in small popups. The old…
Akerus
  • 363
  • 2
  • 16
3
votes
5 answers

CSS make columns with different number of text equal

.colomn { column-count: 3; }

Page 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown…

zhog
  • 31
  • 1
3
votes
2 answers

column-count and column-width not respected

The Problem Using the CSS column-property to create columns on a page I am noticing some weird behavior of the layouting engine. Namely, I am using body { padding: 0; background-color: black; margin: 0; column-width: 308px; column-gap:…
niklasfi
  • 15,245
  • 7
  • 40
  • 54
3
votes
1 answer

CSS multi-column layout prevent moving columns when height changed

Trying to figure how to prevent columns from moving when we have changed height of column. Look JSFiddle, try to click links in 3 column to see: https://jsfiddle.net/g305643f/1/ If you want to offer a solution with non multi columns - this task of…
Ulad Kafk
  • 31
  • 2
3
votes
3 answers

Print a thin HTML table on multiple columns

I have a simple 2-column table that has A LOT of rows: [500 more rows]
row 1 column1row 1 column2
row 2 column1row 2 column2
row 4999 column1row 4999…
clementgamache
  • 100
  • 10
1 2 3
…
22 23