Stack Overflow
Stack Overflow

Questions tagged [column-count]

The column-count CSS property describes the number of columns in an element.

The column-count CSS property describes the number of columns in an element.

Further Reading

129 questions
29
votes
5 answers

Can I order my CSS columns horizontally instead of vertically?

Here is my code: .column { column-count: 4; column-gap: 10px; -moz-column-count: 4; -moz-column-gap: 10px; -webkit-column-count: 4; -webkit-column-gap: 10px; }
Alan Yong
  • 993
  • 2
  • 12
  • 25
28
votes
4 answers

When using column-count, overflowing content completely disappears in all but first column, why?

When using column-count in a wrapper, and the containers in the wrapper have border-radius applied, and content in the container is overflowing, the content completely disappears in all the columns, except the first one. Here is my example:…
Szabolcs
  • 1,463
  • 2
  • 12
  • 20
17
votes
7 answers

Column-count is not working in Chrome

I have a text splitted in 4 columns and it works perfectly in Safari I don't know why I can see just 2 columns in Google Chrome. Tested with Chrome 55.0.2883.95 (64-bit) Any help would be greatly appreciated. #people{ -webkit-column-count:4; …
Federico
  • 1,392
  • 1
  • 17
  • 40
12
votes
4 answers

How can I prevent an absolutely positioned element from breaking within CSS columns?

I have a 2 column layout using HTML and CSS. Within these columns, I have a selectmenu that will show when one of these list items are clicked. I need to position this selectmenu relative to the clicked item and not affect the layout of the elements…
CLL
  • 1,312
  • 3
  • 13
  • 26
8
votes
4 answers

CSS column-count and Chrome bug: how to avoid overflow content being cropped

When column-count is used, it seems to crop any overflow content. #columns { -webkit-column-count: 1; -webkit-column-gap: 10px; /*-webkit-column-fill: auto;*/ -moz-column-count: 1; -moz-column-gap: 10px; /*-moz-column-fill:…
Run
  • 54,938
  • 169
  • 450
  • 748
8
votes
2 answers

With column-count, can you dynamically change from 3 to 2 columns if the resolution smaller?

I'm using the column-count property to set a page with multiple divs at three columns, which looks great on larger screens. Each div has a fixed width of, say, 500px (contained images). When working on smaller screens however, the browser tries to…
natsturner
  • 143
  • 2
  • 5
6
votes
1 answer

CSS column-count doesn't fill the whole area

I'm trying to display items in 8 columns with css3 rule column-count. However, sometimes it shows 6, sometimes 7. I tried to set a specific width for the items, and nothing seems to work. Click here to see the Fiddle body {margin: 0;} .container…
Ditto
  • 296
  • 1
  • 13
6
votes
3 answers

Keep a Heading with the Following Text

I'm using the css column-count feature to break my section into two columns. On one page, I have an h3 heading at the bottom of the first column and the following p paragraph at the top of the next. I'd like to keep the heading with the first few…
curt
  • 4,422
  • 3
  • 42
  • 61
5
votes
0 answers

CSS columns - expand one element without rearranging

I couldn't find an identical scenario anywhere, I've wasted inordinate hours on this already. I'm trying to achieve a normal webkit column where the elements are clickable/expandable in the y-direction. I drew this picture to explain what I…
marcs
  • 281
  • 1
  • 6
5
votes
4 answers

Column-Count Property is not working on Firefox

I have used the CSS3 multi-column feature, using the column-count property to split into multiple columns. This is my code: div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count:…
Nisarg
  • 1,631
  • 6
  • 19
  • 31
5
votes
3 answers

Using separator in column count

I want to use a separator in every column while using the column-count of CSS. HTML:
5
votes
1 answer

Prevent column-count from breaking elements' border

I'm creating a layout using column-count and -webkit-column-count but I found an issue that appears multiple times. As you can see from this image, Chrome 45 (not happening in FF) breaks elements' border, which is very strange and quite annoying.…
Vandervals
  • 5,774
  • 6
  • 48
  • 94
5
votes
2 answers

CSS column-count splitting my table into two different columns

I'm trying to create newspaper-like columns on my page. However, my page contains tables, and in IE, Chrome, Safari, and Opera, the table is being separated into two different columns;this is not the behavior that I want. Where there is a table, I…
J Fournier
  • 190
  • 3
  • 9
5
votes
4 answers

Force div to next column

I'm creating an image grid using column-count. The issue with using columns is the fact, like text, even images get broken. So the top half of an image can be in one column and the bottom half can be in the second column. I solved this by adding…
Paul van den Dool
  • 3,020
  • 3
  • 20
  • 44
5
votes
3 answers

CSS column-count columns differ in height

I'm trying to create a masonry grid of images The general idea is to use column-count in to achieve this example. I have three columns with a bunch of images, and the CSS and HTML is identical to that in the link. The problem is that the columns…
Erik Honn
  • 7,576
  • 5
  • 33
  • 42
1
2 3
…
8 9