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
3
votes
2 answers

Prevent split cards in columns with CSS

I'm making a timeline with two columns. The problem I've got is that one card is split over two columns like shown on image below. How could I solve this problem? Here you've my SCSS and HTML code. .card-col-2 { @media (min-width: 980px) { …
H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
3
votes
1 answer

4th column is shown when specifying column-count of 3

I'm trying to leverage the css 'column-count' in combination with CSS padding, and and I'm observing that if I specify a column count of 3, the browser renders part of a fourth column if content doesn't fit. as shown below Here is a JSFidle ->…
Edward
  • 1,076
  • 1
  • 12
  • 24
3
votes
2 answers

How to break up column layouts in Firefox without column-span?

I have just discovered that Firefox doesn't support the CSS property 'column-span' yet. Without 'column-span', breaking up column layouts seems unworkable. Is there a workaround to achieve the same result?
P Tippetts
  • 31
  • 4
3
votes
3 answers

Horizontal columns with multicolumn headers

I have horizontal scrolling columns. There is some text with headers inside of them. I need to make each header forsing a new column and occupiing all space above columns beloning to it: or so: But the best thing I can do is (by the way, it fails…
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
3
votes
1 answer

Display last item of a list in different way

How can I display the last item of a list in a different way? http://www.orafivenetiassociati.ennestudio.net/le-marche/ The problem is that the 3 first elements are ok, but the last one goes out of the body and in a small screen the item would not…
Nicolò Scapin
  • 240
  • 1
  • 4
  • 15
3
votes
1 answer

    list type not displaying when using CSS3 multi-column layout

I'm using the CSS3 multi-column layout for an ordered list, but the list-numbers for the individual list-items's aren't being displayed in the second column. Here's the JSFiddle. Sample code is below. HTML
  1. Item 1
  2. Item…
gurur
  • 31
  • 1
3
votes
0 answers

CSS: multi column layout rips text apart in Safari

I'm having issues with Safari (9.0.1) and displaying text over multiple columns: it just rips lines horizontally (!) apart so that the ascenders remain in the previous (bottom) line and the rest of the letters is displayed at the top of the new…
bowrilla
  • 154
  • 6
3
votes
2 answers

Absolute positioning within CSS3 columns

I'm trying to style a popup-menu that shows a submenu on hover, popping out to the right of the hovered item. My main items are split into two columns using column-count, and this is where the misery begins. In Firefox, everything behaves as…
z00l
  • 895
  • 11
  • 21
3
votes
2 answers

CSS: Force li's inside a column-count to not cut to a new column

I'm trying to force the li.key to not wrap to a new column. I want a new li.key to start at the top of each column. Here's a JS Fiddle. Is this possible without the use of JS?
  1. A
      …
ditto
  • 5,917
  • 10
  • 51
  • 88
3
votes
1 answer

Extra space beneath CSS column layout

I have a 2 column CSS-only grid which works, however it causes excess space beneath both columns. . If I remove inline-block from each cell the excess space is not so bad however this is needed to prevent the grid wrapping. I presumed the issue was…
jshjohnson
  • 157
  • 4
  • 16
3
votes
2 answers

Target nth column using CSS multi-columns

Is it possible to target the nth column when using CSS multi-columns? For example: I have a two-column layout and want to only target the 2nd column: HTML
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed…
user1706680
  • 1,103
  • 3
  • 15
  • 34
3
votes
0 answers

CSS to have fluid layout multi-column grid where each div varies in height

I want to make a layout that consists of 3 columns. The 3 columns are made up of divs that each contain an image of variable aspect ratio. I want to stack these multiple-height divs in the 3 columns in such a way that the gap (margin) between them…
harryg
  • 23,311
  • 45
  • 125
  • 198
3
votes
1 answer

Using CSS multi-column layout leaves unwanted top and bottom margin

I'm experimenting with CSS3 columns, and I noticed there are top and bottom margins added, despite that I explicitly set them to 0. Here's a screenshot: I've highlighted the margins in yellow. The red rectangles are block level element outlines…
stevenvh
  • 2,971
  • 9
  • 41
  • 54
2
votes
1 answer

How to get specific column content from a multi-column layout made by CSS3?

I have a webpage which content(single div and a lot of text with formatting) is splitted into several columns(30-40) by CSS3 ( through column-height and column-width) Is there any way to get content of a specific column (the text inside that…
Mykhailo Gaidai
  • 3,130
  • 1
  • 21
  • 23
2
votes
0 answers

Distribute text across grid columns equally

I want to achieve the following grid layout: Each column contains an image, whereas the middle one has as col span of 2. All the text belongs together, i.e. I want to distribute it equally across all columns. As every column should start with an…
skimbaz
  • 33
  • 4
1 2 3
…
22 23