CSS Properties: How to fills css columns?
Solution:
HTML Code:
<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to fills css columns</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
.content-box {
-webkit-column-count: 3; /* Sets the number of columns for elements with the class "content-box" to 3; specific to WebKit browsers */
-moz-column-count: 3; /* Sets the number of columns for elements with the class "content-box" to 3; specific to Mozilla browsers */
column-count: 3; /* Sets the number of columns for elements with the class "content-box" to 3 */
-webkit-column-fill: auto; /* Sets how to fill columns for elements with the class "content-box" to auto; specific to WebKit browsers */
-moz-column-fill: auto; /* Sets how to fill columns for elements with the class "content-box" to auto; specific to Mozilla browsers */
column-fill: auto; /* Sets how to fill columns for elements with the class "content-box" to auto */
}
.content-box1 {
-webkit-column-count: 3; /* Sets the number of columns for elements with the class "content-box1" to 3; specific to WebKit browsers */
-moz-column-count: 3; /* Sets the number of columns for elements with the class "content-box1" to 3; specific to Mozilla browsers */
column-count: 3; /* Sets the number of columns for elements with the class "content-box1" to 3 */
-webkit-column-fill: balance; /* Sets how to fill columns for elements with the class "content-box1" to balance; specific to WebKit browsers */
-moz-column-fill: balance; /* Sets how to fill columns for elements with the class "content-box1" to balance; specific to Mozilla browsers */
column-fill: balance; /* Sets how to fill columns for elements with the class "content-box1" to balance */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<div class="content-box"><!-- Starts a division element with a class of "content-box" -->
<h1>w3resource Tutorial</h1><!-- Inserts an h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.</p><!-- Inserts a paragraph element with text describing CSS -->
<h1>w3resource Tutorial</h1><!-- Inserts another h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.</p><!-- Inserts another paragraph element with text describing CSS -->
</div><!-- Ends the division element with a class of "content-box" -->
<div class="content-box1"><!-- Starts another division element with a class of "content-box1" -->
<h1>w3resource Tutorial</h1><!-- Inserts an h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.</p><!-- Inserts a paragraph element with text describing CSS -->
<h1>w3resource Tutorial</h1><!-- Inserts another h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.</p><!-- Inserts another paragraph element with text describing CSS -->
</div><!-- Ends the division element with a class of "content-box1" -->
</body>
</html>
Explanation:
- This HTML document demonstrates how to set the number of columns and how to fill CSS columns.
- The CSS style block defines rules for elements with the classes "content-box" and "content-box1".
- For both classes, the -webkit-column-count, -moz-column-count, and column-count properties set the number of columns to 3 for browsers that support the respective prefixes and the standard property.
- For the class "content-box", the -webkit-column-fill, -moz-column-fill, and column-fill properties set how to fill columns to "auto", which means the browser automatically balances the content across columns.
- For the class "content-box1", the -webkit-column-fill, -moz-column-fill, and column-fill properties set how to fill columns to "balance", which means the browser attempts to distribute content evenly across columns.
- The HTML body contains two division elements, each containing multiple h1 and p elements.
- The content in the division elements with the classes "content-box" and "content-box1" will be displayed in three columns, with the content being filled either automatically or balanced across the columns, depending on the class.
Live Demo:
See the Pen column-fill-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
 |  |  |  |  |
| Yes | Yes | No | No | No |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.