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

List in columns layout depending on viewport width

How can I make several columns from one list with CSS? The number of columns must change depending on the screen width with media queries as shown here : lage screen: Row1 Row6 Row11 Row2 Row7 Row12 Row3 Row8 Row13 Row4 Row9 Row14 Row5…
Sergiy Nenko
  • 81
  • 9
2
votes
1 answer

CSS3 Columns and pseudo element positioning

I've got a page with CSS3 columns, and I am trying to place a pseudo element at the same Y position as the inline element, but at a fixed X position (in the left margin). This works great on the first column, but the rest of these pseudo elements…
Freedom
  • 93
  • 7
2
votes
1 answer

epub 2-column page break and layout

I am creating a 2-column epub book for a specific device. My problem is that when I use css to specify the columns ( -webkit-column-count: 2; -webkit-column-rule: 0px;), the end result is: on Page 1 it shows (Part 1 | Part 3), and on Page 2 it…
user789924
  • 21
  • 1
1
vote
1 answer

CSS3 Multi Columns And Variable Height Content Issues

I am currently working on a prototype that is using CSS3 multi columns for dividing up content and it appears to work well. My issue is that inside of a block that is part of the columns there is an expanding height section and well, in Firefox when…
Dwayne Charrington
  • 6,524
  • 7
  • 41
  • 63
1
vote
1 answer

Multi-column layout for items list when space permits

There is a list of items, and each item has some room for shrinking it till min content. On some screen sizes the list can be shown in two columns because there is enough space for this. Which technique can help with this? Requirements: Items…
AKd
  • 501
  • 4
  • 17
1
vote
1 answer

R markdown multi column layout - how to fix the width of a column using CSS & HTML

Dear helpful community, I have been trying for hours to find a way to place two elements side-by-side in R markdown while controlling the width of the columns in the layout (for html output). I have found this thread and implemented it very fast.…
Julie Courraud
  • 23
  • 5
1
vote
0 answers

Column height matching automatically its width, using CSS flexbox

How to make that a column using flexbox has a height which automatically/dynamically matches its width? #container { display: flex; width: 500px; flex-direction: row; } #a { background-color: red; width: 50%; } #b { background-color: blue;…
Basj
  • 41,386
  • 99
  • 383
  • 673
1
vote
2 answers

How do I break html lists in columns, honoring alphabetical order in column direction?

what if I have a list like this:
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
And want a rendering like this: a | e | i b | f | c | g | d | h | I mean, broken into…
Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118
1
vote
1 answer

Django Radio Buttons in Columns

I have a radio button with n choices, the choices themselves being picked up from a Database. Forms.py class FilterForm(forms.Form): DressTable = mydb['DressInfo'] ColorTable =mydb['ColorInfo'] dress =…
Raja
  • 71
  • 1
  • 5
1
vote
0 answers

Reactive Vue Data Does Not Render in Firefox Columns

I've run into an extremely strange problem while developing a Vue SPA in Firefox (v89.0.1). Reactive data will not render on the page when it is contained within columns. Here is an example: