Home BlogKnowledge BaseCSSCSS3 Coding Tips to Create a Multiple Column Layout

31 October

CSS3 Coding Tips to Create a Multiple Column Layout

WRITTEN BY Justin Spencer
Rating:

You come across multi-column layout every day in your life when you go through the newspapers and magazines. The print industry does it to present long news stories in an organized and reader friendly way. Taking cue from the print industry, web developers also started presenting content in multiple columns to make it attractive. But doing so was easier said than done considering the fact that one needed to divide the content manually using ‘divs’, specify the width, padding, margin, borders which made coding complex. The advent of CSS3 has made this job simple as CSS3 Multi Column Module simplifies the division of content into columned layout. Here we’ll discuss a few coding tips which can help us create multi-column layout in a webpage. But first let us take an overview of this robust CSS3 module.

What is CSS3 Multi Column Module?

CSS3 Multi Column Module describes multi-column layout in CSS. Here in the style sheets you can declare the content of an element that is to be laid out in multiple columns. With the help of this flexible module you can ensure the flow of content from on module to another and define the number of columns. The module allows you to make the website responsive to be presented on various devices including speech synthesizers and small mobile devices. It is currently supported by all major web browsers including IE10+, Firefox 5+, Chrome 12+, Safari 3.2+ and Opera 11.1+.

Tips to Create Multi-Column Content

In CSS3 Multi Column Module you can create multi-column layout four CSS properties. They are -

  • ‘column-count’ – This determines the number of columns into which the content of the element will flow.
  • ‘column-width’ – It is used to describe the optimal width of each column.
  • ‘column-gap’ – This defines the padding between columns.
  • ‘column-rule’ – This defines the border between columns.

Column Count

Let us now take a look at how the column count property works in CSS3. Here in the example below we shall divide the text content into two different columns. As you can see below this property tells the browser to render the content into columns by the specified number and let the browser decide the proper width for each column.

article {
 -webkit-column-count:2;
 -moz-column-count:2;
 column-count:2;
 }

Column Width

Along with the column-count, there is another way in which multiple columns in a webpage and this is by specifying the width of the columns using the column-width property. Here the property allows the browser to decide how many columns should be generated in place. This property is often preferred by many web designers over the column-count property as the width of the column remains uniform across all devices.

article {
 -moz-column-width: 150px;
 -webkit-column-width: 150px;
 column-width: 150px;
 }

Column Gap

As the name suggests column-gap property defines the spaces that separate each column in the web page. This is one of the most important properties in CSS3 Multi Column Module as it makes the webpages reader friendly. The gap value can be defined in em or px. However the value cannot be negative as has been defined in the specifications. In the example below we have specified the gap between the columns as 20 pixels which is what is commonly used by most developers around the world.

article {
 -webkit-column-gap: 20px;
 -moz-column-gap: 20px;
 column-gap: 20px;
 }

Column Rule

Now we come to the last property in the CSS3 Multi Column Module. Using this property you can easily define the borders between the columns in your webpage. Now in the two examples below we have used two different kinds of borders between the columns. In the first example we have used a dotted border while in the second we have used a solid border between the different columns.

article {
 -moz-column-rule: 1px dotted #ccc;
 -webkit-column-rule: 1px dotted #ccc;
 column-rule: 1px dotted #ccc;
 }
article {
 -moz-column-rule: 1px solid #000;
 -webkit-column-rule: 1px solid #000;
 column-rule: 1px solid #000
 }

Apart from these CSS3 properties there are several others which can be used to present multiple columns in a website and they include column-fill, column-span, column-breaks etc. However, you need to keep in mind that these tips work well in modern browsers and create issues especially with older versions of IE.

Few examples of Multi Column layout:


Image Source


Image Source


Image Source
Want to know more about CSS3? Visit our post on CSS3 Tricks and Techniques or Talk to our CSS3 experts for your web project requirements!

About 

Justin Spencer is an Individual with great interest in latest technologies, applications and gadgets. He is the Key contributor to MarkupBox Blog. During his leisure he loves to hangout at Google +

0 Comments
FacebookLinkedInPinterestTwitter

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Rated 5.0 ( ) out of 5.0 for PSD to HTML & Theming Services.