lucy24 - 7:21 am on May 23, 2012 (gmt 0)

One thing I never understood about those authority sites is that it has always been a nightmare to dig a clue about specific basic thing while going through the documentation. For example, all is good about how you tell it how many columns, column's width, etc. but how to you tell it when to go into the next column?

There's a bunch of stuff about "column-break-before: always" and "column-break-within: avoid" and so on. Or "break-before: avoid-column", depending on what phase of the moon you're reading in. (I made that up. I think it actually has to do with sunspots.) Maybe it works in Opera; my everyday browsers all ignore it.

If it's important to have the column breaks occur in specific places, you may be better off using "display: inline-block". Put all your Column 1 stuff in one div, all your Column 2 stuff in a second div. If there is room they will display side by side; if not, they will go one after the other.

Even worse, I took the Example VIII, posted onto the web, and ... nothing, no columns. When I checked the source of the page, heck, different code, totally.

Yes, when it says "<img src = ...>" you kinda have to assume that there's something they're not telling you :) But this is all slightly preliminary, so maybe it's left over from some earlier draft and nobody noticed the mismatch.

Try this. Change "15em" to "6em". Fix up the image tag with a width and height-- something small like 100 each way. In the CSS, take the trio of lines
column-width: 15em;
column-gap: 2em; /* shown in yellow */
column-rule: 4px solid green;
Copy them twice. Make one into -moz-column- etcetera and one into -webkit-column- etcetera.

Add the line
background-color: blue
within the div properties, and the line
background-color: white
in the p properties.

Finally paste in a bunch more of the gibberish text.

Now it's starting to look more like their example, isn't it? Try the alternate img lines from examples IX and X too.