HTML5: Your visual blueprint™ for designing rich web pages and applications

SPAN OBJECTS HORIZONTALLY ACROSS COLUMNS

To further the look of a newspaper on your web page, you can span objects horizontally across columns to display headlines, bylines, and figures that cover the entire width of the columns:

selector > child {
 column-span: none|all;
 -moz-column-span: none|all;
 -webkit-column-span: none|all;
}

The value for column-span can be only one of two keywords: none, which is the default, or all, which is the entire width.

Whatever you are spanning horizontally must be a display: block object such as a paragraph, heading, or other semantic tag group. Despite its name, do not use the <span> tag because it displays inline. If you are unsure, you can always force an element to be displayed as a block object.

For example, ...