The column-fill property specifies how to fill columns. The default value is balance, where the columns are balanced. Browsers will minimize the variation in column length. Another value is auto, where the columns are filled sequentially, and may have different lengths. In this example, we set the height to be 300px. You can see how the auto value uses up the full height but not all the columns. The balance value uses all the columns, but not the full height, in order to balance the columns:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
.newspaper1 { -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; height: 300px; -webkit-column-fill: auto; /* Chrome, Safari, Opera */ -moz-column-fill: auto; /* Firefox */ column-fill: auto; } .newspaper2 { -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; height: 300px; -webkit-column-fill: balance; /* Chrome, Safari, Opera */ -moz-column-fill: balance; /* Firefox */ column-fill: balance; } </style> <body> <h3>Using column-fill:auto;</h3> <div class="newspaper1"> 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> <hr /> <h3>Using only column-fill:balance;</h3> <div class="newspaper2"> 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> |
Column-fill:auto;
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.
Column-fill:balance;
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 column-fill property is supported only by Firefox but none of the other major browsers.
