CSS3 Multiple Columns: Column-Span

The column-span property specifies how many columns an element should span across. The following example specifies that the <h2> element should span across all columns:

column-span: all;
HTML file: Displayed by browser:
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
</style>
<body>
<div class="newspaper">
<h2>Safety When Using Today's Technology</h2> Whenever you use a computer, you make decisions that can affect your comfort, health, safety, and productivity. This is true whether you use a desktop keyboard and monitor in an office, a notebook computer in a college dormitory, a tablet in the kitchen, or a handheld computer at the airport. In every case, you choose your body’s position relative to the technology. Whether you are working, studying, or playing, staying in one position for long periods can cause discomfort and fatigue in your muscles and joints. Rather than computing in a single seated posture, move regularly through a range of seated and standing positions, finding your comfort zone in each of them. Many people do not naturally incorporate a standing posture into the range of positions because it is unfamiliar. With practice, however, they realize how much better they feel when they move from sitting to standing throughout the day.
</div>
</body>

Safety When Using Today's Technology

Whenever you use a computer, you make decisions that can affect your comfort, health, safety, and productivity. This is true whether you use a desktop keyboard and monitor in an office, a notebook computer in a college dormitory, a tablet in the kitchen, or a handheld computer at the airport. In every case, you choose your body’s position relative to the technology. Whether you are working, studying, or playing, staying in one position for long periods can cause discomfort and fatigue in your muscles and joints. Rather than computing in a single seated posture, move regularly through a range of seated and standing positions, finding your comfort zone in each of them. Many people do not naturally incorporate a standing posture into the range of positions because it is unfamiliar. With practice, however, they realize how much better they feel when they move from sitting to standing throughout the day.

Note: Firefox and Internet Explorer 9 (and earlier versions) do not support the column-span property.

Back button Table of Contents Next button