Multiple columns of links allowing for multiple lines

Question

I am currently trying to create a 2 column list of links, however when a link goes onto multiple lines, it leaves a gap in the next column. I have solved similar problems in the past using Masonry, though this always seems overkill everytime I need to use it. Is there a clean CSS way of achieving this layout without using JQuery plugins and the like?

Multiple columns

Markup

<ul class="two-col-links">
    <li><a href="">About us</a></li>
    <li><a href="">Press</a></li>
    <li><a href="">NMMT</a></li>
    <li><a href="">Careers</a></li>
    <li><a href="">Sitemap</a></li>
    <li><a href="">Partners &amp; <br>Links</a></li>
    <li><a href="">Terms &amp; <br>Conditions</a></li>
</ul>

CSS

ul {
    width: 200px;
}
li {
    width: 100px;
    float: left;
    display: inline;
}

JSFiddle

Note on the example above how "Partners & links" leaves a gap on the left hand column - is there a way around this to remove this gap?

Not really unless you're willing to change your markup, like this (and don't quote me on semantics) http://jsfiddle.net/evx350nb/ — Chad, Mar 16 '15 at 16:46
Sorry, it didn't copy for some reason. http://jsfiddle.net/evx350nb/1/ — Chad, Mar 16 '15 at 16:50
If I have to make that structure my html would always be: http://jsfiddle.net/evx350nb/2/ — Alvaro Menéndez, Mar 16 '15 at 16:52
possible duplicate of [CSS float LI with varying heights without gap](http://stackoverflow.com/questions/21801135/css-float-li-with-varying-heights-without-gap) — Brewal, Mar 16 '15 at 16:54
possible duplicate of [HTML/CSS: Making two floating divs the same height](http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height) — Stickers, Mar 16 '15 at 17:01

tutankhamun · Accepted Answer · 2017-03-31T09:33:06.723

3

Using float is a bad idea. Try to use column-count property

Look example:

ul {
    width: 200px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

li {
    width: 100px;
    float: left;
    display: inline;
}

<ul class="two-col-links">
 <li><a href="">About us</a></li>
 <li><a href="">Press</a></li>
 <li><a href="">NMMT</a></li>
 <li><a href="">Careers</a></li>
 <li><a href="">Sitemap</a></li>
 <li><a href="">Partners &amp; <br>Links</a></li>
 <li><a href="">Terms &amp; <br>Conditions</a></li>
</ul>

edited Mar 31 '17 at 09:33

answered Mar 16 '15 at 16:55

tutankhamun

880
2
11
21

@wickywills Use column-width on the ul rather than width on the li. – radiaph Mar 16 '15 at 17:12

score 2 · Answer 2 · answered Mar 16 '15 at 16:58

2

ul {
    width: 200px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

Note that this will cause the options to flow downwards rather than left-to-right, and does not work on Internet Explorer earlier than version 10. If those constraints are acceptable to you, this is the most robust approach since it can be extended to multiple columns if the number of options in your menu increases.

answered Mar 16 '15 at 16:58

radiaph

4,001
1
16
19

Had to accept other answer, as they were a couple of mins faster, but +1'd for the effort :) Thanks! – wickywills Mar 16 '15 at 17:11
No worries, I upvoted @tutankhamun's answer for the same reason. – radiaph Mar 16 '15 at 17:15

Multiple columns of links allowing for multiple lines

2 Answers2