Using CSS Columns in Place of Floats for Website Layouts

New CSS layout techniques for creating mutli-column webpage designs

Roman columns
Columns of content can be created in websites using CSS columns.

For many years, CSS floats have been a finicky, yet necessary, component in creating website layouts. If your design called for multiple columns, you turned to floats. The problem with this method is that, despite the incredible ingenuity that web designers/developers have shown in creating complex site layouts, CSS floats were never really meant to be used in this way.

While floats and CSS positioning are sure to have a place in web design for many years to come, newer layout techniques including CSS Grid and Flexbox are now giving web designers new ways to create their site layouts.

Another new layout technique that shows lots of potential is CSS Multiple Columns.

CSS Columns have been around for a few years now, but lack of support in older browsers (mainly older versions of Internet Explorer) has kept many web professionals from using these styles in their production work. With the end of support for those older versions of IE, some web designers are now experimenting with new CSS layout options, CSS Columns included, and finding that they have so much more control with these new approaches than they did with floats.

The Basics of CSS Columns

As its name suggests, CSS Multiple Columns (also known as CSS3 multi-column layout) allows you to split content into a set number of columns. The most basic CSS properties that you would use are:

  • column-count
  • column-gap

For column-count, you specify the number of columns you want. The column gap would be the gutters or spacing between those columns.

The browser will take these values and split the content evenly into the number of columns you specify.

A common example of CSS multiple columns in practice would be to split a block of text content into multiple columns, similar to what you would see in a newspaper article. Say you have the following HTML markup (note that for example purposes, I am only putting the start of one paragraph, while in practice there would likely be multiple paragraphs of content in this markup):


  <div class="content">
  <h1>The heading of your  article</h1>
  <p>Imagine lots of paragraphs  of text here...</p>
  </div>

If you then wrote these CSS styles:

.content {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  }

This CSS rule would split the “content” division into 3 equal columns with a gap of 30 pixels between them. If you wanted two columns instead of 3, you would simply change that value and the browser would calculate the new widths of those columns to split the content evenly. Notice that we do use the vendor-prefixed properties first, followed by the non-prefixed declarations.

As easy as this is, its use in this way is questionable for website use. Yes, you can split a bunch of content into multiple columns, but this may not be the best reading experience for the Web, especially if the height of these columns falls below the “fold” of the screen. Readers would then have to scroll up and down in order to read the full content. Still, the principal of CSS Columns is as easy as you see here, and it can be used to do so much more than just split the content of some paragraphs – it can, indeed, be used for layout.

Layout With CSS Columns

Say that you have a webpage with a content area that has 3 columns of content. This is a very typical website layout, and to achieve those 3 columns, you would normally float the divisions that are in. With CSS multiple-columns, it is so much easier.

Here is some sample HTML:

<div class="content">
  <div class="news”>
  <h2>Latest News</h2>
  <p>Content would go  here…</p>
  <div>
  <div class="blog”>
  <h2>From Our  Blog</h2>
  <p>Content would go  here…</p>
  <div>
  <div class="events”>
  <h2>Upcoming  Events</h2>
  <p>Content would go  here…</p>
  <div>
  </div>

The CSS to make this multiple columns starts with what you saw previously:

  .content {
  -moz-column-count: 3;
  -webkit-column-count: 3; 
  column-count: 3;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  }

Now, the challenge here is that, since the browser wants to split this content evenly, so if the content length of these divisions is different, that browser will actually split the content of an individual division, adding the start of it to one column and then continuing into another (you can see this by using this code to run an experiment and add different lengths of content inside each division)! That is not what you want. You want each of these divisions to create a distinct column and, no matter how big or small an individual division’s content may be, you never want it split. You can achieve this by adding this one additional line of CSS:


  .content div {
  display: inline-block;
  }
  

This will force those divisions that are inside of the “content” to remain intact even as the browser splits this into multiple columns. Even better, since we did not give anything here a fixed width, these columns will automatically resize as the browser resizes, making them an ideal application for responsive websites.  With that “inline-block” style in place, each of your 3 divisions will be a distinct column of content.

Using Column-Width

There is another property besides “column-count” that you can use, and depending on your layout needs, it may actually be a better choice for your site. This is “column-width”.  Using the same HTML markup as shown previously, we could instead do this with our CSS:


  .content {
  -moz-column-width: 500px;
  -webkit-column-width: 500px;
  column-width: 500px;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  }

  .content div {
  display: inline-block;
  }

The way that this works is that the browser uses this “column-width” as the maximum value of that column. So if the browser widow is less than 500 pixels wide, these 3 divisions would appear in a single column, one of top of another. This is a typical layout used for mobile/small screen layouts. As the browser width increases to be large enough to fit 2 columns along with the specified column gaps, the browser will automatically go from a single column layout to two columns.

Keep increasing the screen width and eventually you will get a 3 column design, with each of our 3 divisions displayed in their own column. Again, this is a great way to get some responsive, multi-device friendly layouts, and you don’t even need to use media queries to change the layout styles!

Other Column Properties

In addition to the properties covered here, there are also properties for “column-rule”, including color, style, and width values that allow you to create rules between your columns. These would be used instead of borders if you want to have some lines separating your columns.

Time to Experiment

Currently, CSS Multiple Column Layout is very well supported. With prefixes, over 94% of web users would be able to see these styles, and that unsupported group would really just be much older versions of Internet Explorer which you may not be supporting anymore anyway. With this level of support now in place, there is no reason not to begin experimenting with CSS Columns and deploying these styles in production ready websites. You can start your experiments using the HTML and CSS presented in this article and play around with different values to see what would work best for your site’s layout needs.