Implementing a layout using multi-column

Using the multi-column properties

The multi-column properties provides the ability to create a layout where the content is like a newspaper article.

The multi-column technique starts with specifying a container to hold the columns.

The following Table outlines the multi-column properties.

Property Description
column-count Specifies the number of columns
column-gap Specifies the amount of space to place between columns
column-rule-color Specifies the color of the vertical rule drawn between columns
column-rule-style Specifies the type of vertical rule to draw between columns, for example, solid or dashed line
column-rule-width Specifies the width of the vertical rule drawn between the columns
column-rule A shorthand way to specify the color, style, and width of the vertical rule between the columns
column-span Specifies how many columns the element should span across; possible values are a number of columns or all; the default value is 1
column-width Specifies how wide the columns should be
Columns A shorthand method to specify the number of columns and their width

The following code demonstrates the multi-column layout technique to display text in an article format: 

<head>
<style type="text/css">
   #multicolumn {
        width: 80%;
        height: 400px;
        border: 1px solid black;
        column-count: 5;
        column-rule-color: black;
        column-rule-style: dashed;
        column-rule-width: 2px;
        column-gap: 5px;
    }
    hgroup {
        column-span: all;
        text-align: center;
    }
</style>
</head>
<body>
    <article id="multicolumn">
        <hgroup>
            <h1>My Blog Article</h1>
        </hgroup>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integ
            Curabitur tincidunt nisi ex, ut eleifend turpis egestas vitae.
             eros eget rutrum. Duis luctus lorem id mattis placerat. Etiam
             suscipit mollis. Morbi augue mi, maximus at lectus id, mollis
            consequat, est non cursus suscipit, quam nulla porta enim, sed
            non nisi. Praesent pulvinar ante eu euismod cursus. Fusce quis
            id egestas diam. Etiam ac augue orci. Aliquam scelerisque conv
            pretium. In vel elementum lorem.
        </p>
    </article>
</body>

Ads Right