Google Plus Facebook Twitter RSS YouTube

CSS3 column-width Property

column-width is a new styling property in CSS level 3. It is mainly used to set width of the column and also used to make browser to determine the number of columns. It is often used in creating the multicolumn layout module. It can be applied to almost all HTML and user defined Non HTML web elements but does not support to some web elements like table, however it works in table cells. In other words, it can be applied to block level elements like non-replaced block level elements and inline block elements. The speciality of css3 column-width property is, it converts a single block level element into multicolumn layout and distribute the data of single column into multicolumn.

Multicolumn Layout Module width

Syntax

CSS Code

column-width: value;

The width of the column is written as given above. Its initial value is set to auto but users can set to particular length by specifying a value starts from zero. However, it is always better to give more than zero to see columns in web document. The column-width property is not inherited and also not supporting to percentages.

At this time, column-width property does not work directly in any of web browsers except Opera. In order to make Mozilla Firefox to support to column-width property, users have to use -moz- prefix. Similarly, Google Chrome and Safari accept this css3 property when users use -webkit- prefix. However, Internet Explorer is not supporting to this property in older versions but Microsoft made this feature gets work in IE 10 browser.

Creating Multicolumn Layout Module

The css3 column-width property is usually used in three possible different cases. For example, consider a HTML web element div and place some text inside the start and end tags of HTML div tag to display text in a sectional block.

HTML Code

<body>

  <div>The data of this example starts like this. First include div start tag after
  start tag of body element and place some text after start tag of div element and
  close the div tag and it has to place before closing the body tag. Initially, HTML
div element creates a sectional block element and shows the text in a single column
in web browser. However, this single column sectional block can be converted into
multicolumn by setting the column width. When users use column width property, the
text content is obviously converted into multicolumn. In this article, you are
going to know how exactly you have to use the column width property practically in
possible cases.
</div> </body>

When you place the data inside the div element, it displays the text content in a single column layout as given below.

Output in Web Browser
The data of this example starts like this. First include div start tag after start tag of body element and place some text after start tag of div element and close the div tag and it has to place before closing the body tag. Initially, HTML div element creates a sectional block element and shows the text in a single column in web browser. However, this single column sectional block can be converted into multicolumn by setting the column width. When users use column width property, the text content is obviously converted into multicolumn. In this article, you are going to know how exactly you have to use the column width property practically in possible cases.

This single column is about to transform into multicolumn layout module by using CSS3 column-width property.

value: auto

In this case, column-width is set to auto and column-count is specified. The column-count property divides the single column sectional data into specified number of columns. The specified number of columns here is 3.

CSS Code

<head>
<style type="text/css">

  div {
     column-width: auto;
     -moz-column-width: auto;
     -webkit-column-width: auto;
     column-count: 3;
     -moz-column-count: 3;
     -webkit-column-count: 3;
  }
  
</style>
</head>

In this case, div element is now converted into three column layout because the column-count property is set to 3. So, web browser must display the data in three columns but each column width is set to auto. Therefore, web browser can display each column in any width but browser displays them in same width. The width of column is determined by the web browser based on the width of the web document. If web document's width is also set to auto, web browser considers the user's computer width and determines the width of the three columns equally.

Output in Web Browser
The data of this example starts like this. First include div start tag after start tag of body element and place some text after start tag of div element and close the div tag and it has to place before closing the body tag. Initially
HTML div element creates a sectional block element and shows the text in a single column in web browser. However, this single column sectional block can be converted into multicolumn by setting the column width.
When users use column width property, the text content is obviously converted into multicolumn. In this article, you are going to know how exactly you have to use the column width property practically in possible cases.

value: length

Case: 1

Giving some length to column-width property is another method. Specifying some length to css3 column-width property, instructions web document the width of each column of multicolumn layout module. It does not matter whether you set column-count property to auto or completely ignore column-count property; both methods determine the number of columns automatically by the web browser based on the width of the web document. If in case web document’s width set to auto browser considers width of the user’s computer.

CSS Code

<head>
<style type="text/css">

  div {
     column-width: 120px;
     -moz-column-width: 120px;
     -webkit-column-width: 120px;
     column-count: auto;
     -moz-column-count: auto;
     -webkit-column-count: auto;
  }
  
</style>
</head>

(or)

CSS Code

<head>
<style type="text/css">

  div {
     column-width: 120px;
     -moz-column-width: 120px;
     -webkit-column-width: 120px;
  }
  
</style>
</head>

In this case, width of the column is set to 120px but column-count is set to auto according to first css code and it is ignored in second css styling code. Both css systems give choice to web browser to determine the number of columns. In fact, web browser determined four columns by considering the width of the web document or computer user's width if web document's width is set to auto. For this reason, data of single column div element is now shared in four columns.

Output in Web Browser
The data of this example starts like this. First include div start tag after start tag of body element and place some text after start tag of div element and close the div tag and it has
to place before closing the body tag. Initially, HTML div element creates a sectional block element and shows the text in a single column in web browser. However,
this single column sectional block can be converted into multicolumn by setting the column width. When users use column width property, the text content is obviously
converted into multicolumn. In this article, you are going to know how exactly you have to use the column width property practically in possible cases.

Case: 2

In this case, the principle width of document in our demo browser is 580 pixels. When placing div tag in specified width document, the div tag occupies same width. Hence, the width of the div tag element is set to 580 pixels length. The css3 column-width property's value is set to 93 pixels; which means each column's width must be 93px. Whether you set column-count to auto or ignore it completely from element's properties, your web browser automatically calculates the number of columns and shares the data in each column reasonably.

CSS Code

<head>
<style type="text/css">

  div {
     width: 580px;
     column-width: 93px;
     -moz-column-width: 93px;
     -webkit-column-width: 93px;
  }
  
</style>
</head>

(or)

CSS Code

<head>
<style type="text/css">

  div {
     width: 580px;
     column-width: 93px;
     -moz-column-width: 93px;
     -webkit-column-width: 93px;
     column-count: auto;
     -moz-column-count: auto;
     -webkit-column-count: auto;
  }
  
</style>
</head>

The ratio between width of the web document or web browser to width of the column is 6. So, the sectional div element is now transferred into six equal multi-columns and the data is distributed in all six columns appropriately as shown in below demo. In first css code, no column-count property is specified but in second css code, column-count is set to auto. In both cases, web browser gets the choice to determine the number of columns.

Output in Web Browser
The data of this example starts like this. First include div start tag after start tag of body element and place some text after
start tag of div element and close the div tag and it has to place before closing the body tag. Initially, HTML div element
creates a sectional block element and shows the text in a single column in web browser. However, this single
column sectional block can be converted into multicolumn by setting the column width. When users use column
width property, the text content is obviously converted into multicolumn. In this article, you are going to know how exactly
you have to use the column width property practically in possible cases.

CSS3 column-width property can be used in modern web designing or developing, according to above three demonstrating examples.

Follow Us
Google Plus Facebook Twitter RSS YouTube
Subscribe via Email
Save or Share This CSS3 Tutorial with Your Friends
Save or Share CSS3 Tutorial