Explanation: These CSS declarations (columns and more) allow you to divide the web page into a multi-column layout (like text in a newspaper or magazine). Sadly, they are only partly supported in -webkit and -moz browsers at the time of this writing. This is improving.
Some of the current properties include the following:
- columns (a short-hand)
- column-width
- column-count
- column-gap
- column-rule
- column-fill
- column-span
- break-before
- break-inside
- break-after
Example CSS code:
Examine the web page itself for details (view the source code). Note that there are vendor specific prefixes. One should also include the default (not done below). One can affect the number of columns, the gap between columns, whether a line appears in the gap (and the color of the line) along with controlling how columns break, span, fill, and overflow. There are many capabilities we did not previously have available.
h2 + div {
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
-moz-column-rule-style: solid;
-moz-column-rule-color: #fff;
-moz-column-rule-width: 2px;
-webkit-column-rule-style: solid;
-webkit-column-rule-color: #fff;
-webkit-column-rule-width: 2px;
}
Example page (view the source code): http://learning-html5.info/CSS3/CSS3_ThreeColumn.html (will work in most modern browsers).
References:
Loading ...