HTML and CSS Reference
In-Depth Information
specifying a container to hold the columns. In this case, an
article
element will be used. The
following markup is added to the page:
<html>
<head>
<style>
#c_lo {
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;
}
</style>
</head>
<body>
<article id="c_lo">
</article>
</body>
</html>
This HTML page contains a style block to set up the multi-column layout. The body
contains an
article
element that will be set up to handle the multiple columns. Some multi-
column properties are already set on the
article
element. Table 4-8 details the multi-column
properties.
TABLE 4-8
Multi-column properties
Property
Description
Specifies the number of columns
column-count
Specifies the amount of space to place between columns
column-gap
Specifies the color of the vertical rule drawn between columns
column-rule-color
Specifies the type of vertical rule to draw between columns, for example, solid or
dashed line
column-rule-style
Specifies the width of the vertical rule drawn between the columns
column-rule-width
A shorthand way to specify the color, style, and width of the vertical rule between
the columns
column-rule
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
Specifies how wide the columns should be
column-width
A shorthand method to specify the number of columns and their width
Columns
Search WWH ::
Custom Search