Question

I have some content set to be in 3 columns, but as it wraps from column to column in Chrome, it adds the margin at the top of the next column, which makes sense in one way, but looks very bad.

Here is an example of what I’m talking about: http://www.sanguinediabetes.com/wp/concept/

How can I style this so there is not an ugly gap at the top of some of the columns, but still space between the paragraphs that end midcolumn?

Answer 1

What you’re seeing is arguably the correct behavior for multicolumn elements. The bottom margin you’ve set on each paragraph will push down subsequent paragraphs, even when there’s a column break just before those paragraphs. Yeah, it’s arguably weird, but hey, there are even bigger issues with this layout model that need fixing right now.

One way to address your problem would be to remove all paragraph margins and force a column break after certain selected paragraphs. The revised draft of the spec from last year provides for a column-break declaration. But support so far is literally nil, the MDN article on the topic is nonexistent, and chrome doesn’t even pretend to support it. Basically, you’re in some pretty new territory, and the tools aren’t quite there yet.

While I’m here, there are other pressing problems with your layout. To see the most basic one, try sizing the viewport narrow, around 500 pixels. Your columns become painfully thin and unreadable, really just a stack of individual words. Considering that your text says “Mobile phones have helped to popularize the primary concept of interface design: it shouldn’t be the duty of the user to muddle through complex procedures and hidden options to achieve simple tasks, or even complex ones. It is the duty of the software to be designed in such a way that every operation is simple, obvious and fast.”? This is kind of funny. Have you tried looking at this on a mobile phone? I would recommend it, considering the content.

Column-count is awesome and all but if you’re looking for any real browser compatibility you’re much better off with good old floated columns for now. Perhaps try some variation of the one true layout.