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

with css column-count / column-width, can I make text flow around large images?

https://jsfiddle.net/6g6176zs/1/ is a simple 2-column CSS layout, where the image is so wide it spans several columns, but unfortunately the text goes over the image. I know you can put column-span:all on only the p's that contain images, but is…
unhammer
  • 4,306
  • 2
  • 39
  • 52
0
votes
1 answer

Can I bring a few elements out of the column flow?

In hope I wrote the question in the title right I'll continue and since I'm not that good with words I'll try to keep it as simple as I can. So what I'm trying to accomplish is list of items with unique id's set to show in columns. If specific id…
uldo
  • 19
  • 2
  • 8
0
votes
1 answer

CSS columns: different render on Firefox and Chrome

I'm trying to set a 2 column list (on desktop screen) using the column CSS property: .footer .double li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .footer .double > ul ul { padding-left: 40px; list-style:…
Ivan
  • 2,463
  • 6
  • 39
  • 51
0
votes
1 answer

Keep equal gaps between CSS multi-column items

I want the left-most and right-most margins of my columns to be the same as the space in between them. I think my codepen demonstrates it pretty well. Just in case that isn't clear, I'd like the red gaps labeled in red to all be the same, as…
Jack Guy
  • 8,346
  • 8
  • 55
  • 86
0
votes
1 answer

Figure elements inside columns fail on max-height

Images can be scaled inside columns to the column-height and column-width, with CSS max-width and max-height properties. But when images are placed inside
tags, max-width seems to be working, but max-height fails[1]. I demonstrated it here…
sluijs
  • 4,146
  • 4
  • 30
  • 36
0
votes
1 answer

CSS3 column not filling width as expected and elements are positioned confusedly

I am having this first contact with the column rule on CSS trying to create a Pinterest-like layout and found it a little weird. I must be doing something wrong, but the results aren't as expected. First thing is: depending on the number of child…
Victor Ferreira
  • 6,151
  • 13
  • 64
  • 120
0
votes
5 answers

Multiple-columns with CSS and HTML

Here is a demo of the structure of my website page I'm working on: http://jsfiddle.net/kz5ch49w/2/ As you can see, there are 5 blocks : body (in grey), header (in red), footer (in green), left block (in yellow) and right block (in black). …
Guillaume
  • 342
  • 1
  • 9
  • 23
0
votes
4 answers

Why does my multi-column layout put everything into one column in Firefox?

In Firefox 31, this code shows up as only one column instead of multiple columns: #wrapper { width: 90%; max-width: 1100px; min-width: 800px; margin: 50px auto; } #columns { -webkit-column-count: 3; …
user310291
  • 36,946
  • 82
  • 271
  • 487
0
votes
0 answers

Why does -webkit-column-count:3 return disordered columns when -moz-column-count doesn't?

My problem is arranging a group of images for the data I got from the database "they are images". I just added the pagination to the could to return per page 9! I use -webkit-column-count:3; -moz-column-count:3; -column-count:3; The view in…
Mustafa ELnagar
  • 482
  • 3
  • 13
  • 25
0
votes
1 answer

Scroll bar does not appears when using CSS3 Column-count

I have a div of fixed width and height containing some text. The div is styled to use css3 column as below: -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ column-count:2; The text flows ok (moz. iexplore,…
user3216099
  • 1
  • 1
0
votes
0 answers

Column-Count in CSS3 - Expertise Needed in Controlling Overflow and Positioning

Edit: I think I just need help understanding the column-count function, it is pretty new and I haven't found much support. What are the defaults for overflow, floating, etc? I can't seem to control these things. Whether or not my columns are flush…
Livvy Jeffs
  • 159
  • 1
  • 1
  • 11
0
votes
0 answers

2 CSS columns spliing text into next column

I have the following setup:

  • Album1 title

    …
Parto
  • 168
  • 2
  • 13
0
votes
3 answers

CSS3 Multi column containing divs and sections

So I just found out about css3 columns specification and immediately saw that I can use it to "modernize" my forum listing which uses a dynamically generated table. The code to generate the table is quite complex as it determines itself whether or…
Ortund
  • 8,095
  • 18
  • 71
  • 139
-1
votes
1 answer

css column-count stays in a single row

As i've read i cannot achieve this specific layout using css grid, i'm testing for the first time css column property. this is the layout i want to achieve using css column-count: https://jsfiddle.net/ghrv6ye4/3/ i've applied this very basic css…
valerio0999
  • 11,458
  • 7
  • 28
  • 56
-1
votes
1 answer

CSS Columns Don't Fill Parent Container As Expected

I have a layout using the CSS columns, and I would like it so the child items fill the respective column-count value. In the code below I have 3 columns via the column-count: 3; property, but the layout never goes wider than 2 columns unless I…
pjk_ok
  • 618
  • 7
  • 35
  • 90
1 2 3
…
22
23