CSS Columns

CSS includes a new way to create columns. Rather than using floats or tables, simply define columns. These can contain text or images; however, there are a few minor issues with alignment.

The basic code is simple. Within the HTML, create a division (or use an existing block) to contain the columns. Next, define the columns within the CSS.

HTML
<div class="cols3">
<h2>This heading will span all the columns.</h2>
<p>Insert your text or images here. You can include as much as you wish.</p>
</div>

CSS
.cols3 {
-webkit-column-count: 3; 
-webkit-column-gap: 5%;
-webkit-column-rule-width: 1px;
-webkit-column-rule-style: solid;
-webkit-column-rule-color: black;

-moz-column-count: 3;
-moz-column-gap: 5%;
-moz-column-rule-width: 1px;
-moz-column-rule-style: solid;
-moz-column-rule-color: black;

column-count: 3;
column-gap: 5%;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: black;
}

.cols3 h2 {
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
text-align: center;
}

Potential Issues

There are several possible issues. Often, the first image or piece of text will not be correctly aligned. The easiest way to correct this is to add the following CSS code

margin-top: 0;

In other instances, you may find items breaking at the wrong spot. This is especially troublesome when using columns to create a quick photo gallery. Add the following CSS code. It should be applied to whatever you wish to keep together.

-webkit-column-break-inside: avoid;
page-break-inside: avoid; 
break-inside: avoid; 

An Example

HTML
<h2>Photos</h2>
<div class="cols2">    

<figure>
    <img src="sol1.jpg" alt="Statue of Liberty">
    <figcaption>Statue of Liberty View from Ferry</figcaption>
</figure>

<figure>
    <img src="sol2.jpg" alt="Statue of Liberty">
    <figcaption>Statue of Liberty Reverse View</figcaption>
</figure>    

<figure>
    <img src="sol3.jpg" alt="Statue of Liberty">
    <figcaption>Statue of Liberty Tablet View</figcaption>
</figure>        

<figure>
    <img src="sol4.jpg" alt="Statue of Liberty">
    <figcaption>Statue of Liberty Close Up</figcaption>
</figure>            

<figure>
    <img src="sol5.jpg" alt="Statue of Liberty">
    <figcaption>Statue of Liberty</figcaption>
</figure>   

CSS
/* figure and image formatting */

img {max-width: 100%;}

figure {
width: 50%;
padding: .5em;
border: thin solid black;
margin-left: auto;
margin-right: auto;

/* keep items together and try to align at top */

margin-top: 0;
-webkit-column-break-inside: avoid; 
page-break-inside: avoid; 
break-inside: avoid; 
}


figcaption {text-align: center;}

/* columns for the images */

.cols2 { 
-webkit-column-count: 2; 
-webkit-column-gap: 5%;
-moz-column-count: 2;
-moz-column-gap: 5%;
column-count: 2;
column-gap: 5%;
}

Photos