Vertically oriented list in 2 columns - IE9+

Developer
Noah Blon
Size
4,600 Kb
Views
60,720
  1. Vertically oriented list in 2 columns - IE9+ Previews
  2. Vertically oriented list in 2 columns - IE9+ HTML Codes
  3. Vertically oriented list in 2 columns - IE9+ CSS Codes

How do I make an vertically oriented list in 2 columns - ie9+?

Post Date: October 7, 2013. What is a vertically oriented list in 2 columns - ie9+? How do you make a vertically oriented list in 2 columns - ie9+? This script and codes were developed by Noah Blon on 24 June 2022, Friday.

Vertically oriented list in 2 columns - IE9+ Previews
IQ Test

Vertically oriented list in 2 columns - IE9+ - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertically oriented list in 2 columns - IE9+</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* The maximum number of items a single column can handle. If a column has more items than the maximum defined here, some items won't display. */
ol { position: relative; margin: 0 0 50px; padding: 0; font-size: 16px;
}
ol li { position: absolute; margin: 0; padding: 0; width: 50%; background: #b3cae5; list-style-position: inside; line-height: 1.5;
}
ol li:nth-child(n+2) { top: 1.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+3) { top: 3em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+4) { top: 4.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+5) { top: 6em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+6) { top: 7.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+7) { top: 9em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+8) { top: 10.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+9) { top: 12em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+10) { top: 13.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+11) { top: 15em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+12) { top: 16.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
/* Round up puts more items in first column if odd total number of items
*/
.roundUp li:nth-child(n+2):nth-last-child(-n+2) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+3):nth-last-child(-n+3) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+4):nth-last-child(-n+4) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+5):nth-last-child(-n+5) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+6):nth-last-child(-n+6) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+7):nth-last-child(-n+7) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+8):nth-last-child(-n+8) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+9):nth-last-child(-n+9) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+10):nth-last-child(-n+10) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+11):nth-last-child(-n+11) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+12):nth-last-child(-n+12) { position: static; margin-left: 50%; background: #efcab2;
}
/* Round Down puts more items into second column if odd total number of items
*/
.roundDown li:nth-child(n+3):nth-last-child(-n+2) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+4):nth-last-child(-n+3) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+5):nth-last-child(-n+4) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+6):nth-last-child(-n+5) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+7):nth-last-child(-n+6) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+8):nth-last-child(-n+7) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+9):nth-last-child(-n+8) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+10):nth-last-child(-n+9) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+11):nth-last-child(-n+10) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+12):nth-last-child(-n+11) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+13):nth-last-child(-n+12) { position: static; margin-left: 50%; background: #efcab2;
}
/* BASE STYLING */
body { padding: 3% 10%; font-size: 16px; font-family: Helvetica, Arial, sans-serif;
}
footer { padding-top: 25px; border-top: 1px solid black;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2>A vertically oriented ordered list broken into 2 columns using CSS selectors</h2>
<a href="http://codepen.io/noahblon" title="Go to the Codepen profile of Noah Blon" rel="author">by Noah Blon</a>
<p>Since IE9 doesnt support CSS3 columns, or flexbox, here's an IE9+ method for creating a vertically oriented ordered list that breaks to two columns without needing extra elements, classes, or JS.</p>
<h3>1<sup>st</sup> Column contains more items if there are a total odd number of items</h3>
<ol class="roundDown"> <li>Aloe</li> <li>Bergamot</li> <li>Calendula</li> <li>Damiana</li> <li>Elderflower</li> <li>Feverfew</li> <li>Ginger</li> <li>Hops</li> <li>Iris</li> <li>Juniper</li> <li>Kava kava</li> <li>Lavender</li> <li>Marjoram</li> <li>Nutmeg</li> <li>Oregano</li> <li>Pennyroyal</li> <li>Marjoram</li> <li>Nutmeg</li> <li>Oregano</li> <li>Pennyroyal</li> <li>Marjoram</li> <li>Nutmeg</li> <li>Oregano</li>
</ol>
<h3>2<sup>nd</sup> Column contains more items if there are a total odd number of items</h3>
<ol class="roundUp"> <li>Aloe</li> <li>Bergamot</li> <li>Calendula</li> <li>Damiana</li> <li>Elderflower</li> <li>Feverfew</li> <li>Ginger</li> <li>Hops</li> <li>Iris</li> <li>Juniper</li> <li>Kava kava</li> <li>Lavender</li> <li>Marjoram</li> <li>Nutmeg</li> <li>Oregano</li> <li>Pennyroyal</li> <li>Marjoram</li> <li>Nutmeg</li> <li>Oregano</li> <li>Pennyroyal</li> <li>Marjoram</li> <li>Nutmeg</li> <li>Oregano</li>
</ol>
<h3> How it works</h3>
<p>All items are absolutely positioned based on the line height using nth-child. The items in the second column are selected with nth-child using a clever trick to select half the items. This overrides the initial absolute position styling. The second columns is staticly positioned and pushed right with margin. I've used Sass to make generating these rules easier but its not required. One caveat is that you'll need to know the maximum number of items that might be held in a single column. It will work for any number of items below that value. In addition, this positioning will only work with items that will fit on a single line.</p>
<h3>Additional Resources</h3>
<ul> <li><a href="http://alistapart.com/article/multicolumnlists" title="A list Apart article about multicol lists">Here's an old A List Apart article containing some other solutions which require specific classing</a></li> <li><a href=" http://codepen.io/keithclark/full/Hygkt" title="demo by Keith Clark" >An awesome and useful demo by Keith Clark with advanced CSS Selector usage</a></li>
</ul>
<footer> <a href="http://codepen.io/noahblon/details/Agpyc#comment-list">Thoughts? Comment on this Pen</a>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Vertically oriented list in 2 columns - IE9+ - Script Codes CSS Codes

/* The maximum number of items a single column can handle. If a column has more items than the maximum defined here, some items won't display. */
ol { position: relative; margin: 0 0 50px; padding: 0; font-size: 16px;
}
ol li { position: absolute; margin: 0; padding: 0; width: 50%; background: #b3cae5; list-style-position: inside; line-height: 1.5;
}
ol li:nth-child(n+2) { top: 1.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+3) { top: 3em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+4) { top: 4.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+5) { top: 6em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+6) { top: 7.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+7) { top: 9em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+8) { top: 10.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+9) { top: 12em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+10) { top: 13.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+11) { top: 15em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
ol li:nth-child(n+12) { top: 16.5em; /* line height is equal to the absolute position top for all items. will only effect first column because overridden later*/
}
/* Round up puts more items in first column if odd total number of items
*/
.roundUp li:nth-child(n+2):nth-last-child(-n+2) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+3):nth-last-child(-n+3) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+4):nth-last-child(-n+4) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+5):nth-last-child(-n+5) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+6):nth-last-child(-n+6) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+7):nth-last-child(-n+7) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+8):nth-last-child(-n+8) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+9):nth-last-child(-n+9) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+10):nth-last-child(-n+10) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+11):nth-last-child(-n+11) { position: static; margin-left: 50%; background: #efcab2;
}
.roundUp li:nth-child(n+12):nth-last-child(-n+12) { position: static; margin-left: 50%; background: #efcab2;
}
/* Round Down puts more items into second column if odd total number of items
*/
.roundDown li:nth-child(n+3):nth-last-child(-n+2) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+4):nth-last-child(-n+3) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+5):nth-last-child(-n+4) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+6):nth-last-child(-n+5) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+7):nth-last-child(-n+6) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+8):nth-last-child(-n+7) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+9):nth-last-child(-n+8) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+10):nth-last-child(-n+9) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+11):nth-last-child(-n+10) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+12):nth-last-child(-n+11) { position: static; margin-left: 50%; background: #efcab2;
}
.roundDown li:nth-child(n+13):nth-last-child(-n+12) { position: static; margin-left: 50%; background: #efcab2;
}
/* BASE STYLING */
body { padding: 3% 10%; font-size: 16px; font-family: Helvetica, Arial, sans-serif;
}
footer { padding-top: 25px; border-top: 1px solid black;
}
Vertically oriented list in 2 columns - IE9+ - Script Codes
Vertically oriented list in 2 columns - IE9+ - Script Codes
Home Page Home
Developer Noah Blon
Username noahblon
Uploaded June 24, 2022
Rating 3.5
Size 4,600 Kb
Views 60,720
Do you need developer help for Vertically oriented list in 2 columns - IE9+?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Noah Blon (noahblon) Script Codes
Name
Burton Ball
Carousel
An Intro to SVG Animation with SMIL - Example 1
Free Radicals
Responsive Image Grid using SVG wrappers
Cross-Browser Range Input With Solid Lower Fill
9 Pens
Juggle
3D CSS Text with Perspective
Planet
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!