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

CSS3 multi-column list

I've been using CSS3 multi-column for a few Wordpress sites now and one thing that I find excepteble but still something I want to know how to fix is that if I put a list(with sub items) in the collumns that it won't keep the structure of the…
Nick Hooked
  • 440
  • 1
  • 5
  • 19
14
votes
2 answers

Section breaks for very long CSS columns

Using CSS columns I can format contiguous data into columns without having to manually break it into sections. This is especially useful when displaying complex, dynamic content. However when the columns' content is so long that their height is…
jla
  • 4,191
  • 3
  • 27
  • 44
14
votes
4 answers

CSS3 multi column layout IE workaround

I've stumbled across a really great project (CSS3 PIE) today that makes it possible to use CSS3 rounded corners, shadows and gradients even in IE6, IE7 and IE8 using CSS settings and usual CSS3 notation. It uses *.htc file that does the trickery and…
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
14
votes
3 answers

Why does Safari render CSS multi-column layout differently?

I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox. I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though. I was…
romeovs
  • 5,785
  • 9
  • 43
  • 74
13
votes
2 answers

CSS columns and margin issue

Update: The latest code which works in all browsers is located in this JSFiddle I am trying to make responsive columns using pure CSS approach. I have an issue where columns sometimes have gap/margin at the top. (old) JSFiddle link to try and…
webvitaly
  • 4,241
  • 8
  • 30
  • 48
13
votes
7 answers

How to make text over flow into two columns automatically

I'm currently developing a website and my client wants the text of various articles to overflow into two columns. Kind of like in a newspaper? So it would look like: Today in Wales, someone actually Nobody was harmed in did something…
thesmallprint
  • 2,363
  • 3
  • 23
  • 31
12
votes
4 answers

How can I prevent an absolutely positioned element from breaking within CSS columns?

I have a 2 column layout using HTML and CSS. Within these columns, I have a selectmenu that will show when one of these list items are clicked. I need to position this selectmenu relative to the clicked item and not affect the layout of the elements…
CLL
  • 1,312
  • 3
  • 13
  • 26
12
votes
3 answers

CSS columns: target last child in each column?

I have a grid of headlines in newspaper format using CSS3 column count. http://jsfiddle.net/L6TTJ/ HTML: