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
- On the MDN — column-count on the MDN
Questions tagged [column-count]
129 questions
0
votes
0 answers
Can I apply different styles to columns in column-count?
Is there any way to add different styles for columns made with column-count? I have a div which is divided into multiple columns using column-count. At a time only two columns are visible on page. I need to add margin-left to the first column and…
pravid
- 719
- 9
- 27
0
votes
1 answer
columns and horizontal scroll
I want to add items into a list dinamically and when I do this, the order is so weird, when I add the first item, this stick to the left, when I add the second one, this go to center, and the third item go to rigth, all good so far, but, when I add…
NewJsGuy
- 113
- 12
0
votes
1 answer
top position of text spread across two columns
I'm having problem with setting top position for the text.
There is main div with "column-count:2" and inside there is some text which spreads in two columns.
Text is in divided in different tags call "sen". There is also some text which is…
pravid
- 719
- 9
- 27
0
votes
1 answer
Mathjax font size shrinks when playing with `position` CSS attribute
I want to make a HTML document with a list of math formulas mimicking a \itemize latex environment (i.e. markers should be like "1), 2), etc") and I would like to have a two-columns layout.
For math formulas I use MathJax, for the markers I used the…
Cédric Van Rompay
- 2,489
- 1
- 18
- 24
0
votes
1 answer
bootstrap embed-responsive does not work with css column count?
bootstrap embed-responsive does not work with css column-count. For example:
/** Divide the target element into columns */
.columns {
-webkit-column-count: 4;
-webkit-column-gap: 10px;
/*-webkit-column-fill: auto;*/
…
Run
- 54,938
- 169
- 450
- 748
0
votes
0 answers
CSS grids - Aligning sections divided with column-count to each others
I'm using "column-count" to create a grid of items aligned upward to each others ("column-gap: 0px").
It looks great but the problem starts when I try to implement infinite scrolling.
I'm adding another grid with the same structure below the first…
Maayan Layfer
- 1
- 1
0
votes
2 answers
Why does column-count break bootstrap?
I want to merge this layout with bootstrap:
https://jsfiddle.net/clankill3r/j9hj8rw8/
(here the columns are balanced nice without gaps, something I can't get done with bootstrap (maybe it is possible, if so let me know).
The problem now is that as…
clankill3r
- 9,146
- 20
- 70
- 126
0
votes
1 answer
Strange CSS :after effect in card columns in Bootstrap 4
I'm using Bootstrap 4 masonry card layout for a project and inside that project I have a
derekshull
- 305
- 1
- 2
- 14
0
votes
0 answers
Google map in div with column-count css property results in unusable map
I'm embedding a Google map with the javascript api v3 in a div that's split into columns using the column-count css property. The map works when it's in the first column, but if it's a later element in another column, the map tiles don't…
David
- 2,412
- 1
- 14
- 22
0
votes
2 answers
select sql table names using column count and name
I am having total 10 tables in my SQL Server database. Out of that 5 table have 21 columns and the first 5 column and last 3 column are of same name.
How can I write a SQL query which will select me the name of these 5 tables.
[Selecting table…
san
- 1,859
- 4
- 26
- 38
0
votes
3 answers
PHP-SQL: Column count error, but only value not inserted is ai primary key
I have a recipe table with 20 fields, and through a form, I've filled up 19. But am getting an insert failed error - 'Column count doesn't match value count at row 1'. The only column I haven't filled in is the auto increment primary key value…
Agni Scribe
- 252
- 3
- 18
0
votes
1 answer
Chrome column layout issue with jumping iframe content
I put videos (in ) to the 3 column layout using "column-count 3". And every time when I hit play button on the second or third video on top, I got it jumped to the bottom of the previous column. It happens only in Chrome. In Firefox it's perfect as…
Anna Kosolapova
- 23
- 7
0
votes
1 answer
Using column-count with integrated show/hide moves columns around
Morning, OK, I have a requirement to have a "pinterest" style page over a 3 column layout. Each column will match the same height as each other, but when we 'show/hide' content, we would like only that column to expand, which it does (in a…
Andy Woodrow
- 13
- 5
0
votes
1 answer
Css column-count error on safari
I'm using some column property to list some items in three columns. but there is a problem on safari only :
when I use border-radius property on it, the text inside columns 2 and 3 disapear.
here a codepen link :…
Arokh
- 36
- 3
0
votes
1 answer
CSS Column Overlap/Overflow
I have a question about using absolutely positioned divs in CSS columns.
Basically, I have a menu system that uses an unorganised list with count-count 2 applied. On hover of one of the li elements, I want an absolutely positioned div to appear -…
Mike Kaperys
- 160
- 1
- 1
- 9