Skip to content Skip to sidebar Skip to footer

Get The Country List In Alphabetic Order In 2 Columns

I am trying to get the country list in 2 columns. My current CSS makes the list display one after the other as below: +-----------------------------------+ Global | Argentina

Solution 1:

If you are not willing to change the DOM, than you will have to use column-count property

Demo

.CountryList {
    -moz-column-count: 10;
    -webkit-column-count: 10;
    column-count: 10;
    height: 100px;
    -moz-column-gap: 100px;
    -webkit-column-gap: 100px;
    column-gap: 100px;
}

As far as the support goes, you can refer it here, so if you are willing to leave vintage browsers than its fine, else consider changing the DOM else use JavaScript or jQuery to achieve that.

Post a Comment for "Get The Country List In Alphabetic Order In 2 Columns"