• 1
  • 2
Home > Tips

CSS3 Multiple Columns Tutorial: column-width

In the last article, weve discussed how to set column-count property. Today, Im going to teach you how to set how to set column-width property.

 

Function:

The column-width property is used to specify the width of the columns.

 

Syntax:

column-width: <length> || auto;

 

Values explanation:

1. auto: its the default value of column-width. If we set the value of column-width is auto or we dont set the values explicitly, the column width of the Multi element will be determined by other properties, such as the column width of the example above is determined by column-count.

2. <length>: it will use fixed value to set the width of Multi element, its unit can be px or em but cannot be a negative value.

 

The supported browsers:

The same as column-count, it cannot be supported by IE. Besides, it need to add prefix when it is in Firefox, Safari and Chrome:

 /*Firefox*/
   -moz-column-width:<length> || auto;
   /*Webkit*/
   -webkit-column-width:<length> || auto;
   /*W3C*/
   column-width:<length> ||  auto;

 

After knowing the basic knowledge of column-width, lets see the example below:

In this example, the column width is not a specific value and other parameters are default values.

 .columnWidth {
 -moz-column-width: auto;
 -webkit-column-width: auto;
 column-width: auto;      
   }

 

The result:

 

 

From the result, we can see that we cannot get any effect if we just set all the values as auto, for the current value is determined by the column count of the element and we didnt specify a value for the column count, it is defaulted as 1 column.

 

So lets set the column-count as 2:

 .columnWidthCount {
 -moz-column-width: auto;
 -webkit-column-width: auto;
 column-width: auto;
 -moz-column-count: 2;
 -webkit-column-count: 2;
 column-count: 2;
  }

 

The result:

 

 

 Now we can see if weve set the column-width as auto, the multiple column effect can be achieved only when weve set the column-count.

 

And then lets see another example. In this example, weve set the column-width as 195px and the column-gap as 0:

   .columnWidthBig {
      -moz-column-width: 195px;
      -webkit-column-width: 195px;
      column-width: 195px;
      -moz-column-gap: 0;
      -webkit-column-gap: 0;
      column-gap: 0;
      -moz-column-rule: 0 none;
      -webkit-column-rule: 0 none;
      column-rule: 0 none;     
   }

 

The result:

 

 

As we can see, the width of these two columns has become 200px automatically to fill up the space between each column.

 

Then lets see the next example: whatll happen when the width of column is greater than the width of the element container:

 .columnWidthBig2 {
      -moz-column-width: 450px;
      -webkit-column-width: 450px;
      column-width: 450px;
      -moz-column-gap: 0;
      -webkit-column-gap: 0;
      column-gap: 0;
      -moz-column-rule: 0 none;
      -webkit-column-rule: 0 none;
      column-rule: 0 none;
   }

 

The result:

 

From the result above we can see that although the width of column is greater than the width of the element container, the element content layout will be carried out according to the width of the element container rather than the width of the width of column.

In conclusion, wed better set a specific values for the column-width and the column-count to adjust different resolutions.

 

 

 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