Reputation: 135
I have a list of ul with 9 items, that I want to split into 2 columns. The first one to have the first 4 items and the second column to have the other 5 items.
I used this css
ul { -webkit-columns: 2; -moz-columns: 2; columns: 2; }
HTML
<div class="footernav">
<ul class="footer-lt">
<li><a>Home</a></li>
<li><a>Resort Overview</a></li>
<li><a>Photo Gallery</a></li>
<li><a>Contact Us</a></li>
<li class="footertextcolor">Phone</li>
<li>+000 60 275-737<li>
<li class="footertextcolor">Address</li>
<li>Armenia, Yerevan,</li>
<li>G. Hovsepyan </li>
</ul>
</div>
but i get 5 items in the first column and 4 in the second. Is there a way I can specify where the break happens?
Upvotes: 0
Views: 456
Reputation: 679
Honestly, you are probably better off making 2 ul tags. There does not seem to be a way to accomplish 2 unequal columns using that CSS property, unless of course you throw some blank li tags in there when needed.
Upvotes: 1