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
1
vote
2 answers

My column content is wrapping to a new column mid-content

I have 4 articles that I cannot put in blocks (in section, div, or whatever) because they are generated by PHP code (I am developing a WordPress template and these articles are the posts written by the admin for a specific category). And I want to…
Héloïse Chauvel
  • 502
  • 3
  • 6
  • 21
1
vote
0 answers

How to get an element to maintain its position in column structure when the height changes

I have put together a CodePen to illustrate the issue I'm trying to solve - http://codepen.io/nicknoop/pen/rMgPXX. Elements are displayed using CSS columns; within each element there is some hidden text, revealed via jQuery. If I expand the element…
nicknoop
  • 11
  • 2
1
vote
1 answer

Multi-Column Property with 2 list items per column

I use CSS3 multi-column properties to style an unordered list. I want to achieve 2 rows and 8 columns in total with 2 list items per column. But actually I get 3 list items in one column - i suppose when the word-length is short eg. first three list…
StandardNerd
  • 4,093
  • 9
  • 46
  • 77
1
vote
1 answer

Why is chrome not using use of all the width when using columns?

I have a problem with Chrome and columns. I want to have sets of links each with a title that are organised into columns that will not be split between multiple columns. I have managed to acheive this in firefox, ie and safari but chrome is not…
Tristanisginger
  • 2,181
  • 4
  • 28
  • 41
1
vote
3 answers

CSS columns vertical overflow workaround

I'm trying to arrange images in column-like way using CSS columns within a relatively fixed div. I want the div to scroll vertically but when it reaches the maximum vertical space available it creates new columns at the right forcing the div to…
Marco Ramirez Castro
  • 316
  • 2
  • 5
  • 23
1
vote
1 answer

CSS column-rule responsive bug

I'm trying a 3-column layout using CSS, and would like to have a vertical rule separating the columns. This example inside the iframe is what I'm looking for and seems to work…
Joao Martins
  • 11
  • 4
1
vote
1 answer

CSS column break in Firefox

I'm trying to figure out a cross-browser method for implementing a columned layout for an unordered list. The markup is coming out of a CMS, so I cannot modify the output outside of adding a class(es). I can get the columns to work, but I also need…
E Tarasewicz
  • 69
  • 7
1
vote
0 answers

Fixed navigation using static column-width but auto column-count width adaption issue

I am trying to use CSS columns within my fixed/absolute positioned dropdown navigation. I would like to specify the columns-width and dropdown's max-height and let the browser automatically fill as many columns as needed. But for some reason the UL…
Möhre
  • 929
  • 1
  • 6
  • 17
1
vote
0 answers

Multicolumn layouts don't work when printing in Chrome

I've been working on making a printer-friendly version of a page full of events. We settled on having the page use multiple-columns CSS to save paper. Much to my surprise, Chrome has an override so that I can't use multi-columns when printing. Is…
Wray Bowling
  • 2,346
  • 2
  • 16
  • 19
1
vote
2 answers

CSS3 Columns are not displaying on IPad and IPhone

I'm using CSS3 Columns like .Content { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s…
Changnam Hong
  • 1,669
  • 18
  • 29
1
vote
1 answer

Columns broken with element inside CSS

I'm working on 5 columns, but the elements inside getting broken. I tried to fix this but I have no luck. Link: http://bit.ly/1NDAnQA CSS: .test-wrap { -webkit-columns: 5; -moz-columns: 5; columns: ; } .test-wrap .img { display: block; …
User014019
  • 1,215
  • 8
  • 34
  • 66
1
vote
1 answer

Different width CSS columns

I'm using CSS Columns, eg: HTML:
CSS: .content { column-count: 2; } However I want to have my columns different widths when using column-width. Is that possible at all? I guess…
Brett
  • 19,449
  • 54
  • 157
  • 290
1
vote
1 answer

Why does css3 multi-column layout's float causes element's width to be equal to one column's width in all browsers?

I have a problem with multi-column layout. I've designed menu as group of div elements that I want to align into 1-4 columns (depending on screen height and menu items count). It cannot be hardcoded. Here's my HTML (jsfiddle link):
Keammoort
  • 3,075
  • 15
  • 20
1
vote
0 answers

Can I stack my columns or should they be inline spans?

I've had these 4 columns in place on my website for a while now. They're all set up to be in boxes of the same height and all fall in line. I'm now looking at making the site responsive and noticed these columns just overlap on smaller devices. I…
Adam R
  • 77
  • 7
1
vote
1 answer

css divs wrap across columns

I'm trying to make a column of tiles similar to masonry without actually having to load another JS plugin. I guess as a last resort I could. My problem right now is that the div's inside my column container get wrapped across if they're long. …
Raythe
  • 472
  • 5
  • 19
1 2 3
…
22 23