CSS Multi-column layout

This code demonstrates how column balancing works. The top multi-column layout will lay out content in sequential columns, so that each column will be filled with content before the next starts, while the bottom multi-column layout will lay out content in a balanced manner, so that each column has approximately the same height. (Try adjusting the width of the browser window to see text reflow.)

Code

#scenario5MCLayout1
{
    /*This CSS rule specifies that the column content will be laid out sequentially,
    with each column filling before the next starts to fill*/
    column-fill: auto;

    /*This CSS rule defines a variable number of columns, depending on the width of
    the parent container, each with a minimum width of 200px*/
    column-width: 200px;

    /*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;

    /*CSS rules to improve multi-column layout visibility*/
    height: 200px;
    border: 1px solid black;

    margin-bottom: 20px;
}

#scenario5MCLayout2
{
    /*This CSS rule specifies that the column content will be laid out to balance,
    such that each column will have approximately the same amount of content*/
    column-fill: balance;

    /*This CSS rule defines a variable number of columns, depending on the width
    of the parent container, each with a minimum width of 200px*/
    column-width: 200px;

    /*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;

    /*CSS rules to improve multi-column layout visibility*/
    height: 200px;
    border: 1px solid black;
}