What a time saver! Thanks to reading through a few CSS properties on w3schools, I just learned about column-count and column-gap. And I got to immediately apply it to a page of the Alaska State Library website that I edit.

In short, I got to cut my style code by quite a bit without changing the aesthetics. Plus, I don't have to keep rearranging my columns to make them pretty. AND the semantics become much more ADA-friendly: one list in one div rather than 3-4 unordered lists broken up by several divs.

Before: .column1, .column2, .column3, .column4{ float:left; margin-left:10px; width:125px; } .column1 ul, .column2 ul, .column3 ul, .column4 ul, .col1 ul, .col2 ul, .col3 ul{ list-style-type:none; } .column1 ul li a, .column2 ul li a, .column3 ul li a, .column4 ul li a{ padding:5px 15px; } .col1, .col2, .col3{ float:left; margin-left:10px; width:175px; }

After: .column-3{ margin-left:15px; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; webkit-column-gap: 30px; /* Chrome, Safari, Opera */ -moz-column-gap: 30px; /* Firefox */ column-gap: 30px; } .column-4{ margin-left:15px; -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; webkit-column-gap: 30px; /* Chrome, Safari, Opera */ -moz-column-gap: 30px; /* Firefox */ column-gap: 30px; }

I hope you've learned something new, too, like I did. Save yourself the time and let the code do the work!