• 1
  • 2
Home > Tips

CSS3 Multiple Columns Tutorial: column-span

In last two articles, we've discussed the column-count and column-width. Today, I want to tell you something basic knowledge about column-span.

The column-span property is used to specifies how many columns an element should span across. This property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element.

 

Syntax

 column-span: none || all;

 

Values explanation:

1. none: its default value, which means it doesnt span across any column.

2. all: in contrast with none, this value means a element spans across all columns.

Supported browsers:

 

Now the supported browsers are only Safari, Chrome, Opera11+ and the browsers with coral webkit need to add its own prefix C webkit, such as:

 /*Webkit*/
  -webkit-column-span: none || all;
  /*W3C*/
  column-span: none || all;

 

Lets see an example of column-span below for better understanding:

HTML code:

 <div class='demo columnBreak'>
       <p>Lorem ipsum ... aliqua. Ut enim ad minim veniam, quis nostrud</p>
       <h2>test header</h2>
       <p>exercitation  ... unt mollit anim id est laborum.</p>
   </div>

 

And then the CSS code:

 .columnBreak {
     -moz-column-count: 3;
     -webkit-column-count: 3;
     column-count: 3;
     -moz-column-gap: 30px;
     -webkit-column-gap: 30px;
     column-gap: 30px;
   }
  .columnBreak h2 {
     background: orange;
     border-bottom: 3px double green;
     margin: 5px 0;
     -webkit-column-span: all;
     column-span: all;
  }

 

The result(in Safari, Chrome, Opera) as follow:

 

 

From the result, we can see the header(h2) has achieved the effect we need and it spans across three columns. Whats more, the result also give us another information: the paragraph p before the header h2 has a three-column layout. When the code is run to h2, it spans across three columns and establishes a new layout. And then the paragraph p after h2 has the same three-column layout as the paragraph before the header h2.

So as we can see, its quite useful to use column-span property when you want a specific element to span across columns and other element stays the same.

 

 Contact Us for Help

If you cannot find a proper solution to your issue through the above methods, our support team is always on standby for whatever problems youve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0