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

CSS multicolumn combined with split of label and input (in HTML)

I need to insert a multi-column which spans over 2 columns. Since my final form consists of 150+ label/input -pairs and that I would fetch data from array, I need to keep the label and input separated in HTML (as-is in the code). Question: What is…
Toolbox
  • 2,333
  • 12
  • 26
0
votes
2 answers

How to align items to rightmost edge of multi-column span (css grid)

I'm working with a CSS grid layout with a 20 column span. For ne of my grid items I've specified that it span 5 columns, like so: .parent-grid { display: grid; grid-template-columns: repeat(20, 1fr); } .grid-item-a { …
tx291
  • 1,251
  • 6
  • 24
  • 42
0
votes
2 answers

Adding images to elements inside a CSS multi-column layout produces vertical gaps

I made a multi-column layout according to this blogpost. Vertical gaps between elements are equal. But as soon as I add images inside the elements, these gaps get messed up as you can see below (DIV #1). I am interested in knowing why this is…
Madamadam
  • 842
  • 2
  • 12
  • 24
0
votes
1 answer

How to hide the first item in a column-count without making the first column disappear?

I use script to grab all the images from a post, and place them in a DIV. I style it with column-count: 3. Then, I use :first-of-type { display:none } to hide the first image. However, doing so actually hides the first column, or causes the first…
Xarcell
  • 2,011
  • 6
  • 33
  • 65
0
votes
1 answer

CSS Columns but with Rows?

With CSS Regions being removed from the spec, is there now any known way to flow content into a series of rows, instead of a series of columns? For example, rotating the page 90 degrees clockwise, and then rotating each individual column 90d ccw?
Dan Gelder
  • 75
  • 5
0
votes
1 answer

Clear floating picture after heading when using 2 columns

I am trying to have my picture float to the right to text but when there is a header inside the text area I want the heading to start under the picture. I still want there to be two columns after the picture. p img { float:…
F Wi
  • 139
  • 5
0
votes
2 answers

Is there a way to display rows and columns within an accordion?

Problem: I have a list of records that can sometimes be long. I'd like to display the list in 4 columns within an accordion. Note: For the sake of this example, I'm only trying to display 2 columns. 1) The following accordion (with the appropriate…
Billy J
  • 99
  • 12
0
votes
1 answer

How do I make an image span multiple columns while having text wrap around it?

I have a html element split into 3 columns using column-count: 3; I want to have an image span across two of the columns and have any text or other images wrap around it. I know there are probably other ways to solve this without using column-count…
newimprovement
  • 52
  • 4
0
votes
1 answer

How to split CSS columns with images for list bullets into their own column

While using CSS columns, image bullets show partly in both columns. Any ideas how to get the bullet images to stay in their own column when columns break? Tried some answers on other stack overflow questions and none of these worked.…
MoxDev
  • 51
  • 1
  • 8
0
votes
4 answers

How to display ul list in columns in IE?

I have an unordered list in three columns: ul#menu-referenzen { list-style:none; -moz-column-count: 3; -moz-column-gap: 50px; -webkit-column-count: 3; -webkit-column-gap: 50px; column-count: 3; column-gap: 50px; } ul#menu-referenzen…
isd17
  • 13
  • 3
0
votes
0 answers

How to make this 3 Column Design Responsive?

I want to use "The Perfect 3 Column Liquid Layout (Percentage widths)" from this website: https://matthewjamestaylor.com/blog/perfect-3-column.htm , and make it mobile responsive, but so far I have been unable to do it. I have added the following…
Mateo Calafat
  • 1
  • 1
0
votes
1 answer

Bullet list is uneven with css property/value columns: 2;

I have a bulleted list that I have divided into two columns using: However, the columns do not appear to start at the same height (see attached image with red line drawn at the top). Is there a better way to split the list into two columns than…
NinjaValerie
  • 77
  • 8
0
votes
1 answer

Bootstrap column layout breaks on resize if resized back to the same size as on page load

If I load my page everything is fine.
uses exactly 320px whereas the
uses the remaining space on the left. Both divs are in one row (side-by-side). If I enlarge the browser window, everything is still fine…
koseduhemak
  • 523
  • 2
  • 4
  • 19
0
votes
0 answers

Masonry item overflows into the next column

Here is my HTML:
…
Amir Rami
  • 375
  • 3
  • 13
0
votes
1 answer

column-fill: auto; no height overflows div

I have a container in a container which has multiple ul tags inside which should break into 4 columns. The should fill up from left to right. In Chrome and all the other even on firefox on my iPad this works without setting a pixel amount in the…
Yannick Wittwer
  • 1
  • 2
1 2 3
…
22 23