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

Multicolumn Layout starting at the same height

As you can see, the second element is 35px lower than the three other elements. The reason for that is, that each element has a margin-bottom: 35px; But why is it appended to the top? If I add display: inline-block I can prevent that but then the…
heroxav
  • 1,387
  • 1
  • 22
  • 65
0
votes
5 answers

How do you center a container inside of a column?

I can't figure out how to center my image containers inside of my columns. Also for some reason the middle picture does not display even though everything is set up exactly how the other two are, is there some reason this is occurring? Also, for…
ChaCol
  • 223
  • 1
  • 7
  • 19
0
votes
2 answers

How do you restrict specific content to only one column instead of going across multiple columns?

I'm trying to restrict each header and paragraph to only be apart of one column instead of auto formatting to go to the next column when it runs out of room. .columns { -webkit-column-count: 3; -moz-column-count: 3; column-count:…
ChaCol
  • 223
  • 1
  • 7
  • 19
0
votes
0 answers

Keep sibling elements together in CSS columns

How can I keep sibling elements together, without wrapping them in a wrapper element? I tried to play with the break-before and break-after properties without success (tested on Chromium 53). In the example below it breaks after h2 although I…
user1415785
  • 342
  • 4
  • 13
0
votes
0 answers

CSS3 column break after in IE/Firefox

Recently been in need of breaking columns after elements with a class 'hardbreak'. Current solution I've gone with is the following: https://jsfiddle.net/y9oyrk9x/ .hardbreak { display: block; -webkit-column-break-after: always; …
user1027444
0
votes
1 answer

page-break-inside: avoid and block level element creates empty column in Chrome

In this fiddle, https://jsfiddle.net/rpep00dg/7/, the content is prepended by an empty column in Chrome. If you open the fiddle in Firefox or Safari, there is no empty column before the "Header". This seems to be the case if the first element is any…
Justin
  • 57
  • 6
0
votes
3 answers

Chrome 52 CSS issue with inline-block and columns

After updating to Chrome 52, a website I'm working on renders columns incorrectly. I use the display: inline-block 'hack' to force column break/force the flow of text. It used to work fine in the latest browsers (Chrome, Firefox, IE 11), but stopped…
Egman Ekki
  • 1
  • 2
0
votes
1 answer

Unable to set X columns using column-count in CSS

I'm having some issues with using columns in CSS. I wanted to set column-count: 6; but it result only in 5 columns. It seems to be working fine for values <=5 but when I try to set something higher it produces weird results. Column-count doesn't…
Krystian
  • 996
  • 9
  • 24
0
votes
2 answers

CSS Only Works on First Column of Site

As you can see, the css only works on the first column to display the item-meta. What is wrong? All the text/meta is in the right place, if you inspect it, it's there. Just for some reason it does not want to change the opacity back to 1. It's odd…
ERIC
  • 63
  • 12
0
votes
1 answer

Column count stacking when there is no content

I have looked around but couldn't find anything describing my problem. I have 5 section elements in a main tag with 3 of them containing text and images. I'm trying to get each section in a column side by side using column count, however the last…
Sai
  • 801
  • 3
  • 10
  • 27
0
votes
1 answer

CSS Columns breaks

I have an article with only a little content paired with an image with a caption in a figure tag. The article has 2 columns declared with CSS3 columns. However the figcaption is being pulled out from within the figure in an attempt to make the…
cameronjonesweb
  • 2,435
  • 3
  • 25
  • 37
0
votes
1 answer

How to avoid blank lines at the top of new column (CSS columns)?

My problem is with the CSS column property. I remembered there's a way to prevent blank (
) lines to end up as the right column's first, row but I can't seem to figure it out. The CSS that creates the column-effect: @media (min-width: 1100px) { …
Neil S3ntence
  • 198
  • 2
  • 19
0
votes
3 answers

Multi column div inside table: Containing div only has width of the first columns

I'm trying to put a "div" around another div that may contain multiple columns. However, as you can see here
Radiobuttons:
Andreas - Dellekom
  • 1
  • 2
0
votes
1 answer

CSS 3d rotation doesn't work with column layout on Chrome

I need to control the transform of some divs clicking in a html node. When these divs are with a display "inline-block" it works ok, but if I wrap them in a column layout with css3, they doesn't work (except in the first column!) Check this fiddle:…
Manuel de la Vega
  • 1
0
votes
1 answer

Two column div issue

I'm experiencing an issue with small paragraphs. As you can see in the picture, i'd like the text to keep flowing down on the left column, but instead the paragraph jumps to the right. I believe this is something related of how the columns are…
Gabriel
  • 5,453
  • 14
  • 63
  • 92
1 2 3
…
22 23