CSS Multi-column layout

This code demonstrates how a multi-column layout can be constructed to have 3 columns, regardless of the size of the parent container. (Try adjusting the width of the browser window to see text reflow.) Note also how the text has been set to be fully justified and hyphenated across each column, and how each column is separated by a column gap and decorative column rule.

Code

#scenario1Container
{
    /*This CSS rule defines that there will be 3 columns of varying width, regardless
    of the size of the container*/
    column-count: 3;

    /*This CSS rule defines a gap between columns of 20px, and a 1px-wide solid black
    column rule between columns. Note that the column rule width does not impact the
    size of the column gap*/
    column-gap: 20px;
    column-rule: 1px solid black;

    /*This CSS rule defines that text in each column should be fully justified, and
    hyphens should be automatically inserted into words when needed. Note that this
    approach is generally recommended with narrow columns*/
    -ms-hyphens: auto;
    text-align: justify;
}