Vilet Scimeca Vilet Scimeca - 3 months ago 8
HTML Question

Breaking a unordered list in to two

I'm trying to break up a dynamic unordered list after the fifth li by year using pure css. Without Js/Jquery.

I attached a image to show example. Example Here

html

<ul id="year">
<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>
<li><a href="#">2014</a></li>
<li><a href="#">2013</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2009</a></li>
<li><a href="#">2008</a></li>
<li><a href="#">2007</a></li>
</ul>



css

ul#year {
margin-top: 20px;

li {
margin-bottom: 20px;
background-color: blue;
width: 50%;
float: left;
a {
@include regular-bold;
color: $darkGray;
}
}

Answer

Wrap the ul in a two-column class and add this css.

.two-column {
   @include column-count(2);
}

ul#year {
   li {
      margin-top: 20px;
   }
}



<div class="two-column">
                                <ul id="year">
                                    <li><a href="#">2016</a></li>
                                    <li><a href="#">2015</a></li>
                                    <li><a href="#">2014</a></li>
                                    <li><a href="#">2013</a></li>
                                    <li><a href="#">2012</a></li>
                                    <li><a href="#">2011</a></li>
                                    <li><a href="#">2010</a></li>
                                    <li><a href="#">2009</a></li>
                                    <li><a href="#">2008</a></li>
                                    <li><a href="#">2007</a></li>
                                </ul>
                            </div>