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
1 answer

Microsoft Edge Reading View Multicolumn CSS

Suppose you open a page in Microsoft's Edge browser. There is sometimes an option to switch to Reading View. For example, this page: https://www.scottaaronson.com/democritus/lec3.html As far as I can tell, this view does two things: first, it uses…
Mark VY
  • 1,489
  • 16
  • 31
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
4 answers

In multicolumn text, stick div to the bottom

I'm trying to stick a div to the bottom of a column in CSS3 multicolumn text. Obviously position:absolute, bottom:0 breaks column. Is there any way to achieve this effect? Or maybe there is more efficient way to organize multicolumn text? .col…
Mee
  • 458
  • 1
  • 6
  • 21
0
votes
1 answer

Can I get span element to ignore columns?

I am creating a web app in which the user drags boxes containing words/phrases into an area. When the user mouses over the boxes, a tool-tip is displayed with the definition of the word. When the user drags boxes into the areas, I would like them to…
Seamang64
  • 3
  • 1
0
votes
1 answer

Multicolumn CSS doesn't break properly

I have a CSS multicolumn: it is fine in Firefox (
    content is not 'broken') but not on Chrome (some items that should be on first column are splitted into second). Looking around I found this solution, but it doesn't seem to work anywhere I place…
Ivan
  • 2,463
  • 6
  • 39
  • 51
0
votes
1 answer

Two-column div contained within individual printed pages

Sorry if this has been asked before, but here goes: I'm creating reports using HTML and CSS, though they eventually get PDF'ed. The report needs to contain two-column layout on most pages, so I'm using:

Lots and lots…

Jon
  • 753
  • 8
  • 18
0
votes
0 answers

Expand a div's width with paragraph elements that have a css column-count property

I have a paragraph element. This paragraph has a column-count css property to it. I am attempting to make my columns from my paragraph element and also expand the width of its parent container. You can see a demo of the problem here:…
Alex Fallenstedt
  • 2,040
  • 1
  • 18
  • 34
0
votes
2 answers

CSS center columns of text

I have some song lyrics in a
with the following class: .lyrics { /* position */ margin: 40px; /* text */ font-size: 18px; text-align: center; column-width: 300px; column-gap: 0; column-fill: auto; height:…
Tamirlyn
  • 13
  • 5
0
votes
1 answer

Element positioning in column-count is messed up

I am trying to use CSS properties to properly align article elements in a
. I have three article elements which will have an image of an old website and a description along with a title. However, as you'll see in the code below, the header for…
Colin Bruin
  • 93
  • 9
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
3 answers

Put elements in rows first, then columns

I'm trying to put some html elements (images) in columns and, depending on the resolution, it would be 1, 2, 3 or 4 columns. For example, if I had 11 images, I would like to put them in this way (3 columns in this case): 1 2 3 4 5 6 7 …
Ommadawn
  • 2,450
  • 3
  • 24
  • 48
0
votes
1 answer

Bootstrap columns and variable height paragraphs

Using Bootstrap 3.3.7 and trying to flow 17 paragraphs of variable height into a 3 column (col-md-4) layout for high-resolution, 2 columns (col-sm-6) or 1 column (col-xs-12). Whether there are three or two columns, I'd like to end up with a layout…
nstuyvesant
  • 1,392
  • 2
  • 18
  • 43
0
votes
1 answer

many divs in a 3-column newspaper layout

Currently I have a number of divs of undefined length/height. they contain a few hyperlinks as a list. The almost-desired effect is achieved by giving these divs float:left; width:150px; margin: 10px; However, in the scenario of the first div…
sentiao
  • 165
  • 9
0
votes
3 answers

CSS Two text column side by side dynamically

I want to create an article that will start in left column, and when it reaches bottom it goes to right column to continue, something like this: So I want the text to continue on the second column when it reaches the bottom, any ideas how I can do…
nikagar4
  • 830
  • 4
  • 11
  • 23
0
votes
1 answer

How do I get a column within a column?

I am trying to get my CSS to look like this: But so far I can only get it to look like this (still adding in font info and images): How can I get it to look like it does in image 1? I am trying to use multiple columns but it's not…
Annamaria
  • 13
  • 2
1 2 3
…
22 23