One of the problems that web designers now face is the vast difference in screen sizes that a website has to look good on. A lot of attention is given over to making text look good on smartphones at the moment but at the other end of the scale desktop monitors are getting bigger and bigger, or more exactly they are getting a lot wider.

At the time of writing most designers are working to a page width that is usually between 960px and 1050px and the page centred for users viewing on a desktop. While this is a great size for these devices there is one potential problem and that is that if the text is the full width of the page it can become difficult to read. This is because you have to move your head slightly in order to read the text. In an ideal world your eyes scan the line of text and then reset themselves when they move to a new line, helping to keep the reader engaged with your content. So how can we make this an ideal world? We can create columns using CSS for our text so that they provide a better user experience.

There is good news and bad news to using this technique. The good news is that it is easy to implement and does not involve you having to get out a calculator to work out what percentages your columns will have to be.

So let’s look at some sample text…

Imagine that we have a block of content that is contained in a div called textArea and we want to split the content into two columns. By adding the following properties to the div in our stylesheet then we can achieve the desired result.

.textArea {

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

From the above I hope that it is obvious that you just need to decide on the number of columns that you require and replace the number “2” with the number that you wish to use.

You can then take your styling a step further by adding the gap property to your stylesheet. This sets the width of the gap between the two columns:

.textArea {

column-count: 2;
-moz-column-count:2;
-webkit-column-count:2;
column-gap: 4em;
-moz-column-gap:4em;
-webkit-column-gap:4em;

}

As you can see the gap between the columns of text is now significantly wider.

The final feature that you might like to add to your columns is to have a line running between your columns. You can achieve this effect by using the column-rule property as shown below:

.textArea {
column-count: 2;
-moz-column-count:2
-webkit-column-count:2;
column-gap: 2em;
-moz-column-gap:2em;
-webkit-column-gap:2em;
column-rule: thin dotted #999999;
                -moz-column-rule:thin dotted #999999;
                -webkit-column-rule:thin dotted #999999;

}

As I said earlier there is some bad news with this technique. The div is quite literally cut in half, or thirds, or whatever number of columns that you have decided to use. This might not seem to be a problem but if there is an image at the point where the break takes place then part of the image will appear at the bottom of one column and the remainder of the image appears at the top of the next column.

If you are looking for a quick and easy way to get your text to split into columns using just CSS then this is a great option. If you are planning on using this for just the desktop version of your website then do remember to set the column-count property to 1 in your media queries for other devices.