CSS3 Multiple Columns: Columns

The columns property is a shorthand property for setting column-width and column-count. The default is the auto value which sets both the column-width to "auto" and the column-count to "auto". The syntax for this property is:

columns: column-width column-count;

This example is set to have three columns at the minimum width of 100 pixels. The actual width of the columns are calculated from the size of their content, dividing the leftover space evenly between the columns, which is why these columns are more than 100 pixels wide:

HTML file: Displayed by browser:
<style>
.newspaper {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
}
</style>
<body>
<div class="newspaper">
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>
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: The columns property is not supported in Internet Explorer 9 and earlier versions.

Back button Table of Contents Next button