Trying to display many radio buttons as columns - getting weird output

Question

JSFiddle here.

I have a div containing many radio buttons. I want a way to do this: Only 4 radio buttons are displayed in one column, after which the next 4 of the radio buttons are shown in the next column, and so on...

From my SO search, I found this way from this question :

 .mdl-radio { display: block; margin: 15px auto; } .mdl-radio, .choose-message-caption { margin: 25px; } .radiobuttons-container { height: 100vh; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } label.mdl-radio { display: inline-block; } 

 <div class="radiobuttons-container"> <label for="sacha" class="mdl-radio mdl-js-radio"> <input id="sendAuthenticationInfo" class="mdl-radio__button" type="radio" name="map-message" value="sacha" /> <span class="mdl-radio__label">Sacha</span> </label> <label for="bob" class="mdl-radio mdl-js-radio"> <input id="bob" class="mdl-radio__button" type="radio" name="map-message" value="bob" /> <span class="mdl-radio__label">Bob</span> </label> <label for="marley" class="mdl-radio mdl-js-radio"> <input id="marley" class="mdl-radio__button" type="radio" name="map-message" value="marley" /> <span class="mdl-radio__label">Marley</span> </label> <label for="canny" class="mdl-radio mdl-js-radio"> <input id="canny" class="mdl-radio__button" type="radio" name="map-message" value="canny" /> <span class="mdl-radio__label">Canny</span> </label> <label for="amy" class="mdl-radio mdl-js-radio"> <input id="amy" class="mdl-radio__button" type="radio" name="map-message" value="amy" /> <span class="mdl-radio__label">Amy</span> </label> <label for="popye" class="mdl-radio mdl-js-radio"> <input id="popye" class="mdl-radio__button" type="radio" name="map-message" value="popye" /> <span class="mdl-radio__label">Popye</span> </label> <label for="insider" class="mdl-radio mdl-js-radio"> <input id="insider" class="mdl-radio__button" type="radio" name="map-message" value="insider" /> <span class="mdl-radio__label">Insider</span> </label> <label for="dogma" class="mdl-radio mdl-js-radio"> <input id="dogma" class="mdl-radio__button" type="radio" name="map-message" value="dogma" /> <span class="mdl-radio__label">Dogma</span> </label> <label for="rowdy" class="mdl-radio mdl-js-radio"> <input id="rowdy" class="mdl-radio__button" type="radio" name="map-message" value="rowdy" /> <span class="mdl-radio__label">Rowdy</span> </label> <label for="albumin" class="mdl-radio mdl-js-radio"> <input id="albumin" class="mdl-radio__button" type="radio" name="map-message" value="albumin" /> <span class="mdl-radio__label">Albumin</span> </label> <label for="donna" class="mdl-radio mdl-js-radio"> <input id="donna" class="mdl-radio__button" type="radio" name="map-message" value="donna" /> <span class="mdl-radio__label">Donna</span> </label> <label for="eli" class="mdl-radio mdl-js-radio"> <input id="eli" class="mdl-radio__button" type="radio" name="map-message" value="eli" /> <span class="mdl-radio__label">Eli</span> </label> <label for="rose" class="mdl-radio mdl-js-radio"> <input id="rose" class="mdl-radio__button" type="radio" name="map-message" value="rose" /> <span class="mdl-radio__label">Rose</span> </label> </div> <!-- .radiobuttons-container --> 

The problem is that as I drag the JSFiddle output panel's left edge to change its width, the output is displayed in multiple columns in a weird way.

And when I wrote a test program in my XAMPP localhost, the output was this weird:

So what is the solution for my problem.

Answer 1

Check this fiddle

You just need to specify number of items in a column.

.radiobuttons-container {
    height:100vh;
    -webkit-column-count: 4;
    -moz-column-count:4;
    column-count: 4;
}