CSS Columns and equal content

Question

I want to utilize CSS3 Columns around my site as it on wide pages provides a better UX for the users. However if I use CSS3 Columns, sometimes the left column is full (lets say 20 lines of text) and the right side only have2 lines of text. Can I with pure css3 (maybe Flexbox) make it have equal amount of content? Or do I need JS to fix this?

Beaware I'm not talking about equal height, but equal amount of content :)

@rnevius: no. If you Google "equal height" you only get results for divs in equal heights (backgrounds and such). I'm interested in "equal text/content". — Morten Hjort
– Morten Hjort, Commented Sep 22, 2014 at 11:51
you should consider using the twitter bootstrap framework or something similar. — galdin
– galdin, Commented Sep 22, 2014 at 12:31
@gldraphael: Why? Do they have a solution for this issue since you mention that framework? — Morten Hjort
– Morten Hjort, Commented Sep 22, 2014 at 13:45
@MortenHjort you don't need js for this - but please provide what you currently have - a sample case - I think I know what your problem is and I can make it work for you with CSS only. But need your code first. — easwee
– easwee, Commented Sep 22, 2014 at 14:35

rnevius · Accepted Answer · 2014-09-22 11:48:59Z

1

You'll need to specify a height property.

From the Mozilla docs:

The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.

However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.

answered Sep 22, 2014 at 11:48

rnevius

27.2k10 gold badges60 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Morten Hjort Over a year ago

Thanks, but this wont work in a RWD-world. Only if all content and sizes are fixed.

Morten Hjort · Accepted Answer · 2014-09-23 06:25:47Z

0

Sorry it was a padding-bottom which messed it up. When I remove that it spreads out nicely. Strange!

answered Sep 23, 2014 at 6:25

Morten Hjort

1,0223 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

CSS Columns and equal content

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related