Column Classes

This is an example of column classes you can add to your theme’s stylesheet, allowing you to easily break content into┬ámultiple columns. Here’s an example of it in use. You can use my Column Class Generator to create your own CSS based on specific screen width and gutter.

/* Column Classes
*
* Width: 1200px
* Gutter: 20px
* Link: http://www.billerickson.net/column-class-generator/
--------------------------------------------- */
.five-sixths,
.four-sixths,
.four-fifths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-fifths,
.three-sixths,
.two-fourths,
.two-fifths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 1.6666666666667%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 49.166666666667%;
}
.one-third,
.two-sixths {
width: 32.222222222222%;
}
.four-sixths,
.two-thirds {
width: 66.111111111111%;
}
.one-fourth {
width: 23.75%;
}
.three-fourths {
width: 74.583333333333%;
}
.one-fifth {
width: 18.666666666667%;
}
.two-fifths {
width: 39%;
}
.three-fifths {
width: 59.333333333333%;
}
.four-fifths {
width: 79.666666666667%;
}
.one-sixth {
width: 15.277777777778%;
}
.five-sixths {
width: 83.055555555556%;
}
.first {
clear: both;
margin-left: 0;
}
view raw style.css hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk