1

Columns are a nice way to avoid over-long lines of text, and still make use of extra horizontal space. However when there is much more text than will fit in the viewport, having to either scroll horizontally, or from the bottom of one column way back up to the top of the next don't seem like ideal solutions.

Is it possible to A) set a max-height on columns (not the containing element) and B) have columns wrap beneath the previous columns when they exceed the container's width, rather than continuing horizontally?

For example:

<div class="content-in-columns"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at sem eget massa consectetur dignissim. Proin euismod tincidunt ante ut varius. Vivamus eu pellentesque ante. Etiam porttitor condimentum nunc. Sed libero nisi, efficitur sed neque ut, vestibulum iaculis augue. Praesent in finibus nisl, vitae ullamcorper magna. Sed pretium tellus felis, non ullamcorper orci ultricies et. Proin eros lacus, laoreet ac viverra in, imperdiet id nunc. Suspendisse leo augue, tempus at pharetra eget, ultrices sed massa. Donec nisl tortor, dapibus auctor arcu a, venenatis congue nulla. Vivamus vitae blandit arcu. Sed varius vel turpis non vulputate. Donec id imperdiet mauris. Integer malesuada eros sit amet est congue varius. Etiam porttitor sapien elit, nec cursus sapien semper id. <!-- Many more screens' worth of text, etc etc --> </div> 
.content-in-columns { width: 100vw; max-width: 100vw; column-width: 50%; /* Imagined rules */ column-max-height: 100vh; column-wrap: wrap; } 

will result in two very tall columns, like this:

+---+---+ | 1 | 2 | | | | | | | | | | | | | | | | +---+---+ 

I'd instead like that example to produce an arbitrary number of columns, half the viewport width and at most the same height as the viewport, paired up so the reader can scroll vertically through:

+---+---+ | 1 | 2 | | | | +---+---+ | 3 | 4 | | | | +---+---+ | 5 | | | | | +---+---+ 

Or, can a similar effect be had with other tools such as grid or flexbox?

4
  • with only one element containing all the text, I doubt you can achieve this. You will probably need extra wrapper Commented Jan 5, 2019 at 1:02
  • Did you try using float: left? You can use div or ul > li and set float: left and give width: 50% for height you can use JS to set equal column height. See this stackoverflow.com/questions/11688250/… Commented Jan 5, 2019 at 4:18
  • @CodeLover it would be better all round if I could use a single containing element for all the text, and rely on the browser to handle to the layout reflow. (mind, that would be a neat solution if we could specify "the next div to put the text in when there's no more room in this one") Commented Jan 5, 2019 at 4:34
  • @RobertK.Bell this article may help you what you want to achieve medium.com/@andybarefoot/… Commented Jan 5, 2019 at 5:11

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.