Column span property (column-span)

The column-span property allows us to define how many columns and element will span across.

Syntax:

selector {

column-span: 1 | all | initial | inherit;

}

Values:

Possible values for column-span property are:

1; This is the default value and it simply makes element span across 1 column.
all; The element spans across all columns.
initial, inherit

Example

The column-span property used for a heading in a newspaper:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    font-family:Arial; font-size:smaller; color:#444; 
    background-color:#fff;
  }
.column
 {
    column-span: all;
        -webkit-column-span: all; /* Chrome, Safari, Opera */
        -moz-column-span: all; /* Firefox */
    column-count: 3;
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
} 
#column2 {
    column-span: 1;
        -webkit-column-span: 1; /* Chrome, Safari, Opera */
        -moz-column-span: 1; /* Firefox */
}
</style>
</head>
<body>

<h3>First box ise set as 'all', while seconf as '1':</h3>
<div class ="column">
Imagine going to a website on the internet except you don't type in the URL (Universal Resource Locator) on your browser. Instead it's like calling someone on your rotary dial phone. To go to Yahoo, you dial 202.43.192.109 which is the site's IP address, including the dots, ... Now to get to other websites, you'd need one of those big heavy yellow pages and look them up alphabetically or by category. Tough, isn't it? That's where the Domain Name System or DNS comes in. If your cell phone has a contacts list you could choose from instead of remembering eleven-digit numbers, why not the Internet?
</div>
<div id ="column2"><br />
Luckily, the DNS system was built into the Internet right from the start and worked very similar to Windows &lsquo;hosts&rsquo; files in keeping a list of hostnames with a corresponding IP address and later became a fully automated system known as the Berkeley Internet Name Domain (BIND).
</div>
  
</body>
</html>

›› go to examples ››

Column span property (column-span)

Syntax:

Values:

Example

The column-span property used for a heading in a newspaper:

Comments

About

Contact

Get Connected