Child

CSS3 Multiple Columns


« Previous Next Chapter »

multiple columns is such property of CSS3, which is used for creating the newspaper layout. You can create your articles to multiple columns, even if it is in one paragraph.

There are three properties of CSS3 multiple columns that is used to make the proper layout, what you want to do. The all measure browsers support multiple column properties except of Internet Explorer.

The three properties of css3 multiple columns has been described following.

  • column-count
  • column-rule
  • column-gap

Below is an Output for Column Count:

CSS3: The development of style sheet was to make the markup language more impressive. It was discovered around 1980s in the beginning of the SGML. The third level of CSS was started to develop around 1998. And till 2009, it was under development. The first working draft of CSS3 was came in 19-01-2001. And since the first introduction still it is under construction. There were some certain shortcomings in CSS2 and due to its unlikeness the developer introduced CSS3. It is divided into different modules according to its specifications. Though the first working draft of CSS3 came on 19-01-2001, but it was initially declared early in the June 1999.

Here is the code:

div
{
 column-count:3;
-moz-column-count:4; /* For Firefox */
-webkit-column-count:4; /* For Safari and Chrome */
-o-column-count:4; /* For Opera */

  
 -moz-column-gap:40px; /* Firefox */
 -webkit-column-gap:40px; /* Safari and Chrome */
 column-gap:40px;
 
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff; 

}