css-multicolumn-layout Questions
6
Solved
There's a similar question here with no real answer: CSS columns bug — 5 column count only showing 4 (with images)
I'm using column-count to display elements in columns (in this case a set of secti...
Calculate asked 13/3, 2012 at 11:49
9
Solved
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...
Blackington asked 1/2, 2017 at 17:16
9
Solved
I have an "Ordered List" which contains about 100 "List Items". This ol makes my page very long and users have to scroll too much.
How can I get the UL to show like this:
1. 6. 11.
2. 7. 12.
3. 8...
Incidental asked 27/2, 2010 at 10:57
3
Solved
Basically, I do not understand why this works:
.grid {
display: grid;
grid-template-columns: repeat(4, min-content);
}
But this doesn't work:
.grid {
display: grid;
grid-template-columns: r...
Telesthesia asked 25/9, 2018 at 17:47
5
So I have CSS like this:
#blogPosts{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 100%;
}
and t...
Plotkin asked 15/5, 2015 at 16:38
3
Solved
I'd like to create a multi column list like this:
https://jsfiddle.net/37dfwf4u/
No problem when using a different list for each column:
<ul>
<li>item1</li>
<li>item2<...
Sestertium asked 5/3, 2017 at 20:7
6
Solved
Let's say I have a div which will contain a set of elements (divs), which may have different heights, but all of them will have the same width.
I've achieved this currently with isotope + masonry,...
Nogging asked 17/2, 2013 at 19:31
19
Solved
With the following HTML, what is the easiest method to display the list as two columns?
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
&...
Anthelmintic asked 7/2, 2013 at 6:50
12
Solved
I am building a menu system presented to the user in multi-column format. The column-count property in CSS3 gets me 90% of the way there, but I'm having difficulties with alignment under Chrome.
T...
Tweeny asked 15/3, 2011 at 16:24
5
I have a css based 2 column layout...
.mainContentSection {
font-size: 1.1em;
margin: 20px 10px 10px;
padding: 0;
-moz-column-count: 2; /* Firefox */
-webkit-column-count: 2; /* Safari and Ch...
Arne asked 18/11, 2015 at 0:10
2
Is it possible to create a two-column, multi-page layout with HTML and CSS as shown in this mockup where content automatically flows from 1 → 2 → 3 → 4 → …?
I'm building an eBook reader/writer. ...
Paring asked 5/3, 2020 at 11:57
6
I'm creating columns in my footer. It works well for Chrome and IE using:
column-count: 4;
break-inside: avoid-column;
I'm getting troubles with Firefox, where the property is crossed out:
What c...
Johns asked 4/6, 2018 at 11:36
19
Solved
Consider the following HTML:
<div class='x'>
<ul>
<li>Number one</li>
<li>Number two</li>
<li>Number three</li>
<li>Number four is a bit ...
Woodberry asked 16/10, 2011 at 15:44
5
Solved
I have a following requirement to design the print layout to generate a pdf and I've tried various options including CSS flex and grid but not much success.
The requirement is:
Show the content in...
Roots asked 8/1, 2021 at 8:31
2
Solved
I'm having a hard time understanding the logic behind the column gap in a multi-column layout. I have the following HTML/CSS in this Fiddle:
<div class="flex-container">
<div cl...
Youngstown asked 6/1, 2021 at 15:16
4
Solved
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...
Tutankhamen asked 14/4, 2015 at 9:58
3
Solved
Is there a way to create a masonry column layout utilizing the flexbox grid that Bootstrap 4 comes equipped with? It seems to me that all of the columns are equal height.
Alesandrini asked 26/1, 2018 at 19:19
2
I need to display tooltips for specific terms in a multiple-column div, and I need them to work across multiple browsers. I began with the w3schools CSS Tooltip example, which works great in a norm...
Willodeanwilloughby asked 20/2, 2020 at 18:14
1
I'm creating a page flow that breaks up a sizable amount of content into columns that stack off to the right, as far as they need to. In other words, I'm trying to create a layout that only scrolls...
Loralorain asked 15/7, 2018 at 2:20
4
Solved
I have a large section of text on a page and when the screen is larger, I have media queries to make the text form columns. However, when I do this, some of the photos don't fully go to into one co...
Smokechaser asked 5/4, 2018 at 17:55
4
Solved
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 cl...
Induce asked 19/7, 2016 at 16:13
2
Solved
Using CSS columns I can format contiguous data into columns without having to manually break it into sections. This is especially useful when displaying complex, dynamic content.
However when the ...
Cathryncathy asked 10/8, 2019 at 0:4
2
Solved
I'm trying to implement a mega-menu.
The number of menu items is variable. By default, they have to be rendered in 4 columns, balanced (the number of items on each column should be nearly the same...
Trichocyst asked 25/2, 2019 at 19:25
2
Solved
I have a table which should be divided into two columns (layout columns, not table columns).
Works fine in all major browsers, except Firefox, which doesn't break the table into two columns.
...
Ethelethelbert asked 20/2, 2019 at 19:30
3
Solved
I would like to use CSS to present a two-column layout. The markup I am using is this
<div style="-webkit-column-count: 2;
-webkit-column-rule: 1px solid black;
-webkit-column-width: 80px;
m...
Demark asked 16/3, 2010 at 10:23
1 Next >
© 2022 - 2024 — McMap. All rights reserved.