Question

On a HTML page, I have three paragraphs of text (each in a p tag), and I want them as columns next to each other.

I know CSS3 columns are great for breaking magically at the right place, to create an even division/height, but then the paragraphs start at the bottom of the previous column depending on the length of the column, resulting in ugly layout.

Is using CSS3 columns outright wrong for this situation? Should I use div tags and float instead? Or what is the best approach?

Answer 1

Assuming that the p elements are wrapped by a parent div element, then the the following should work:

div {
    -moz-column-width: 12em; /* or whatever width you prefer... */
    -ms-column-width: 12em;
    -o-column-width: 12em;
    -webkit-column-width: 12em;
    column-width: 12em;
}

div p {
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
}

JS Fiddle demo, tested only on Chromium 22/Ubuntu 12.10.

The column-break-inside: avoid rule (and it’s vendor-prefixed equivalents) effectively instruct the browser to not break the p elements across two, or more, columns; effectively discarding same-height columns in order to strictly position each element entirely within one column, though under some circumstances this also allows multiple p elements to be placed inside one column.

If you strictly want to enforce one p per column, then you could use the column-break-before: always; or column-break-after: always; rules instead.

References:

• CSS Multi-Column Layout Module, at the W3C.