2-column responsive bullet list

HTML & CSS
1

I want to create a bullet list in 2 columns and would like it to be responsive. I have seen a couple of topics from 2009 and 2011 and imagine there are better ways of doing it now. Can anyone enlighten me, please?

2

For IE10+ you can use the css3 columns property to automatically create the 2 lists side by side.:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.columns {
	-moz-column-count: 2;
	-moz-column-gap: 50px;
	-webkit-column-count: 2;
	-webkit-column-gap: 50px;
	column-count: 2;
	column-gap: 50px;
  -moz-column-rule: 1px solid #000;
  -webkit-column-rule: 1px solid #000;
  column-rule: 1px solid #000;
	padding:0 5px;
}
.columns ul{margin:0;padding:0 0  0 2em;list-style:disc;background:#f9f9f9;}
@media screen and (max-width:760px){
	.columns {
	-moz-column-count: 1;
	-moz-column-gap: 0;
	-webkit-column-count:1;
	-webkit-column-gap:0;
	column-count: 1;
	column-gap: 0px;
	}	
}
</style>
</head>

<body>
<div class="columns">
		<ul>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
				<li>This is a test of a list in 2 columns</li>
		</ul>
</div>
</body>
</html>
3

That’s great. Thanks squire! I can use the other as fallback for earlier versions of IE.

Cheers :slight_smile:

4

I did something like that on this page when I re-coded the site for RWD earlier this year. The first list uses columns (after Paul made me aware of them).
I have a fallback for older IE versions. If you look at the code, I have broken the the list in two for IE and added a second css which uses display: table instead of columns.

5

Thanks Sam. That’s useful.

6

According to [Can I Use][1] columns are OK in IE10 and onward. So I put the list break and extra css in [if IE] tags (they only affect IE9 and earlier).

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="style/oldie.css" />
<![endif]-->

and

    <li>Head torch</li>
<!--[if IE]>
</ul>
<ul>
<![endif]-->
    <li>Swiss army knife</li>

So newer browsers get the single list in columns. Note most other browsers need prefixes.
[1]: http://caniuse.com/#search=column

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.