Question

I’m working on a site that uses a responsive layout and I’ve run into a
problem getting around the shortcomings of the newer CSS multi-column properties
(http://dev.w3.org/csswg/css3-multicol/).

When the browser window is wide enough, I split the text into two
columns with an sidebar for smaller images. The multi-column css
properties work great, but they’re not too smart.

The first section is split evenly into two equal-height columns, but
they’re way too tall. For someone to read this section they’d have to
scroll down along the first column, then back up to the start of the
next to read the rest.

The second section is split into two equal-height columns too, but
there’s only two sentences, so it looks awkward; there’s not really
enough content to justify a second column the user has to read across.

The solution, in my mind, is this:

1. Break sections into sub-sections with a fixed maximum height. That
   way, you can read across columns without scrolling the page, and it looks more
   like an article.
2. Keep sections that are shorter than that maximum height as a single column.

The issue is that CSS3 multi-columns don’t work this way. I think the
only way would be some kind of javascript solution that involves doing
calculations on character-counts, css text properties, and element
dimensions, and then splitting strings/appending new html elements to distribute the content into separate sections to make the columns break correctly.

Keep in mind two things:

1. These columns are fluid-width, so picking magic numbers won’t work.
2. The process has to be reversible, so the responsive layout can switch back to 1-column at narrower browser widths.

Kind of tricky, but I think it’s probably doable enough to try. Has anyone heard of someone out there that might be tackling
this problem already? Or if not, do you have any ideas on how to put an
algorithm together for this?

Thanks so much for your help.

---

1/8/13:

To clarify, here are a few images of the intended modes of the responsive design. (Just two links since I’m new at SO)

Mode 1: Single-column linearized for mobile

Mode 2. Single-column with sidebar for iPad / narrow browser windows

Mode 3. Two-column for wide browser windows

Mode 3 is where the issue is. The first section’s content is too long to fit on one page, so in this case I’m dividing it into rows that fit in the browser’s height. That’s what I’m looking for a JavaScript solution for.

Answer 1

I think what you’re after is this -> http://codepen.io/justincavery/full/KsjHa

What I’m doing here is using jquery to check the count of the number of characters inside the content div.

var $div = $( '#blah' );
if($div.text().length >= 600) {
$div.addClass('columns');
}

If the number of characters are equal to or greater than 600 then it adds the class of ‘columns’ to the containing div.

Just to be clear, this means that any article less than 600 characters will not have the “column” class applied and anything that has more or equal to 600 characters will not.

Now that we’ve got the DOM sorted, on to the CSS (please note that this codepen has some styles that do not relate to this answer, so please use only as a guide).

The next stage is to add the columns for the content that is longer than the 600 characters, but we still need to ensure that on smaller widths we only have a single column otherwise it would just look peculiar.

@media screen and (min-width:48em) {
 /*     48.000em /*(ackkkkkk, device specific bad)768px*/
  .columns { 
  -webkit-column-count: 2; /* Saf3, Chrome*/
  -webkit-column-gap: 4%; /* Saf3, Chrome*/
  -moz-column-count: 2; /* FF3.5+ */
  -moz-column-gap: 4%; /* FF3.5+ */
  column-count: 2; /* Opera 11+*/
  column-gap: 4%; /* Opera 11+*/
}
}

Here I’ve chosen 48ems and greater (ipad portrait and up) as the point at which the columns are defined, allowing for any smaller screens to be a single column.

One of the issues I picked up later on was that if the text was too long you wanted it to be in a single column again. In this case you will need to either remove the class for a higher value, or put a check to see if the character count is in between the two values.

You may also notice that I started looking into a vertical media query which sets the background to pink and the content to two columns but it was not going to achieve what you were looking for.

---

A few points for this type of technique the question is looking at.

1. I didn’t actually realise from the picture that they were two separate sections until I read the question the third time. Most people would assume that the content in the left column continued to the bottom of the page before moving to the right column (ala newspapers and magazines). You would need some kind of break between each section to show this.
2. This is a design thing, so I would assume it would mainly be used for landing/instructional pages where you would want to put more work into styling the content. With that in mind you should just tailor it by adding the classes manually.
3. Finally, the web is not print and people are find with reading things on a single page, check out how nice “The Great Discontent” is to read

EDIT

After updating the question I think the implementation you’re looking for is done on this fine piece of work – http://kaikkonendesign.fi/typesetting-responsive-css3-columns/