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

Responsively collapse 2 column layout to single column

I currently have a page which is comprised of boxes of content, laid out such that there are two floated columns of inequal width, and each box with a varying height that fits its content, something like this: .box { padding: 1em; border:…
DaveAlden
  • 30,083
  • 11
  • 93
  • 155
2
votes
0 answers

Chrome: element vanishes when using filter: brightness in column-layout

Today I've stumbled across a rather strange behaviour in google chrome (version 62.0.3202.94). It occurs when an element inside a column-layout is styled using filter. To be more specific: only when the element is not inside the first column. Here…
Akerus
  • 363
  • 2
  • 16
2
votes
1 answer

auto columns to have each LI of UL justified on a single line

I have an unordered list with a number of list elements. I don't know the exact number of li elements in said ul -- e.g., it could either be 3 or 4 elements (all very concise ones) -- but I display each li as a block (not as an actual list), and…
cnst
  • 25,870
  • 6
  • 90
  • 122
2
votes
1 answer

Why is column-fill property not working as expected with "auto"?

I created an html page with a "2 columns" style with column-fill property set with "auto". So, the first column should be fullfilled before the second one instead of be equally balanced (when "column-fill = auto"). The code is not behaving as…
Douglas
  • 5,229
  • 3
  • 43
  • 54
2
votes
2 answers

Why is column-fill property not working?

I'm trying to create a DIV with a "2 columns" text. So I'm using the column-xxx properties but the column-fill set with "auto" doesn't seem to behave as expected. First column should be fullfilled before the second one instead of be equally…
Douglas
  • 5,229
  • 3
  • 43
  • 54
2
votes
1 answer

CSS columns not working with images

I have four images with different heights and I would like to do a masonry-like column grid using CSS columns. The following CodePen example doesn't fill the third column when setting columns to 3: https://codepen.io/glennreyes/pen/pwjOmy .columns…
glennreyes
  • 2,281
  • 16
  • 19
2
votes
1 answer

Chrome columns bug when number of columns is less then column-count

I'm having an issue with Chrome when I use the column-count property. I have a div where inside it I will have some items so I set column-count: 3; When I have 3 items or more it works well, but when I have only two they are not shown in the same…
emilushi
  • 280
  • 7
  • 16
2
votes
2 answers

How to center single column in CSS multi-column layout

I have an element using CSS multi-column layout to display a list of items.
Item 1
Item 2
Item 3
Item 4
Item…
Philip Jones
  • 366
  • 4
  • 6
2
votes
2 answers

How to do CSS column layout with a "floating" object spanning multiple columns?

I'd like to create a layout in CSS that looks something like this: +----------------+ __5_____ | | __6_____ | | __7_____ | | __8_____ +----------------+ __9_____ ___1____ __3_____ __10____ ___2____…
staktrace
  • 488
  • 3
  • 7
2
votes
1 answer

how to center an item when it's the only one in a multi-column layout

I'm pulling dynamic images into a 2-column layout. If there's only one image, how would I center it, or collapse the columns into one? Currently a single image is placed in the left column. Is there a CSS-only solution? Would the same logic apply…
calipoop
  • 792
  • 9
  • 31
2
votes
2 answers

CSS3 columns in Chrome with child DIV elements

I'm having trouble with CSS3 columns, they don't work as I would have expected in Chrome 53.0.2785 - they work as I'd expect in Firefox 49, IE11, EDGE 38.14393 The first two child DIVs of my "container" DIV display under each other in Chrome, but…
ripper17
  • 73
  • 7
2
votes
0 answers

Why does 'column-fill: auto' not update the width of it's container?

We are trying to make a set of lists fit inside a horizontal scrolling container with a set width and height. We are using CSS columns to try to solve this problem. However, the property 'column-fill: auto' is displaying the list items in the…
jamcd
  • 101
  • 4
2
votes
3 answers

Why does an unordered list leave a blank item at the start with CSS column-count?

I have an unordered list which I want split into columns, so I'm using CSS column-count on the parent div:

Mushrooms:

  • Porcini
  • Shittake
  • Button
    • …
Ben
  • 4,281
  • 8
  • 62
  • 103
2
votes
1 answer

How can I stop my column content from wrapping to a new column?

I want the 4 classes in the middle column to be under the class in the first column and then for "The Information Technology track consists of..." to be moved to the top of the column. How can iI do this? Here is what my code currently…
Rataiczak24
  • 1,032
  • 18
  • 53
2
votes
4 answers

Break html List into another column

I have a html list which is too long for my container and i want to break it and show the extra items in another column. But when i use columns in css it divides the list evenly. Like if i have 12 items then 6-6 in each column. But i don't want to…
Aman Jolly
  • 61
  • 5
1 2 3
…
22 23