I have a dynamically created ordered list that is split into two columns. The problem is that when I have an odd number of list items, the last item of the first column is split between the two columns.
I would like to fix this with just html/css if possible. I know what I could do if I resorted to php or js.
I have hunted and found a fix for unordered lists which use display: inline-block, and width: 100% on the list items, but it makes the bullets disappear. The solution for that, apparently, is to use content with a bullet symbol. This works because all the list items have the same bullet. This will not work with ordered lists.
Is there anyway to get the numbers of the list items to re-appear using just css?
Here is my demo code:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset = "utf-8">
<title></title>
<meta name="description" content="">
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id = "wrapper">
<h1>Ordered Lists in Columns</h1>
<div id="even">
<h2>Even Number of List Items</h2>
<ol>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
</ol>
</div>
<div id="odd">
<h2>Odd Number of List Items</h2>
<ol>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
</ol>
</div>
<div id="odd-fix">
<h2>Odd Number of List Items with Fix</h2>
<ol>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
<li>
<h3>List Item Heading</h3>
<p>List item content goes here.</p>
</li>
</ol>
</div>
</div><!-- end of #wrapper -->
</body>
</html>
and:
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 900px;
margin: 0 auto;
padding: 30px;
border: 1px solid blue;
}
h1, h2 {
margin: 0 0 30px 0;
}
ol {
margin: 0 0 30px 20px;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
column-gap: 30px;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
}
ol li {
margin: 0 0 10px 0;
}
#odd-fix ol li {
display: inline-block;
width: 100%;
}