1

I'm trying to create a column-based, blog layout. I want the text to wrap to a new column when it hits the bottom of the page. At it's very simplest form something like, when the column height == the_height_of_the_wrapper then column-count++.

The problem with something like that would be the text would be distributed evenly. Also, that would rely on css columns and I want something a bit more browser-friendly. Are there any existing plugins for this functionality or anywhere I can get some ideas?

If anyone is familiar with any of the text-heavy windows 8 "metro" apps (such as the news one) that's the kind of layout I'm trying to mimic.

Calvin
  • 630
  • 3
  • 17
  • 1
    Traditional `column-count` is not enought for you? Example: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_column-count – Kasyx Mar 11 '13 at 11:05
  • Nope. Say I started with 1 column, then when I hit the bottom of my screen I increased the count to 2. That would cause the content to be distributed evenly creating two, half height columns, which would look unnatural. I would need the first column to be 100% height and the second column to only contain the overflow from the first, if you see what I mean. – Calvin Mar 11 '13 at 11:07
  • 1
    But look at example, decrease/increase number of columns. Text height is not dependent on number of columns, but on `column-gap`. That means, if your text has 100px height you can only increase it by adding additional columns and gaps between them. – Kasyx Mar 11 '13 at 11:11
  • 1
    Oh I'm such an idiot! All I need to do is add a fixed height on the wrapper div isn't it? – Calvin Mar 11 '13 at 11:14
  • Yes you need to add the height and set `column-fill: auto`. This will not balance the height of the content. – Jehanzeb.Malik Mar 11 '13 at 11:16
  • You right Calvin. It works :) – Kasyx Mar 11 '13 at 11:18

1 Answers1

0

As i noticed in comments, you cannot use column-count there. But there is solution, check this one please: Continuing overflowed text in a different div?

Alternatively. You can apply a fixed height (even a percentage will work) to the wrapper the columns will fill appropriately. (example: w3schools.com/css3/tryit.asp?filename=trycss3_column-count). It even seems as though you don't have to specify a fixed column count as it appears to create extra columns as the content dictates.

Community
  • 1
  • 1
Kasyx
  • 3,170
  • 21
  • 32