Skip to content

Instantly share code, notes, and snippets.

@tjtate
Last active August 29, 2015 14:17
Show Gist options
  • Save tjtate/0e446c059f0beed59511 to your computer and use it in GitHub Desktop.
Save tjtate/0e446c059f0beed59511 to your computer and use it in GitHub Desktop.
CSS3 columns
<ul class="list-column-2">
<li><a href="">How do I unsubscribe?</a></li>
<li><a href="">How do I remove my subscription from automatic renewal?</a></li>
<li><a href="">How can I the find the expiration date of my subscription?</a></li>
<li><a href="">What is my refund policy?</a></li>
<li><a href="">What is my username and password?</a></li>
<li><a href="">What is Jim Rickards' Strategic Intelligence?</a></li>
<li><a href="">Does my subscription come with an automatic renewal option?</a></li>
<li><a href="">When will I be charged for automatic renewal?</a></li>
<li><a href="">How and when will my money be returned to me?</a></li>
<li><a href="">I’m not going to use my Agora Financial Reserve membership anymore. What should I do?</a></li>
</ul>
ul {
&.list-column-2 {
column-count:2;
//optional column gap
column-gap:10px;
li {
//prevents one li's text from moving to the 2nd column
-webkit-column-break-inside: avoid;
//ff uses page break for now
page-break-inside: avoid;
//future standard
break-inside: avoid;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment