column-count on fieldset doesn't work for firefox


I'm trying to do a multi-column layout for a form with multiple pairs of label and input. It works fine in Chrome and IE, but I can't get it to work with Firefox. (demo of the problem). I tried removing the clear: left on the label, but that doesn't help.

Here's the simplified HTML:

    <label>Label 1</label>
    <input type="number" value="0" />
    <label>Label 2</label>
    <input type="number" value="0" />

Here's the CSS:

fieldset {
    height: 110px;      
    border: none;

    column-count: 2;        
    -moz-column-count: 2;
    -webkit-column-count: 2;    

label {
    float: left;
    clear: left;
    width: 125px;
    text-align: right;
    padding: 3px 0 3px 0;
    margin: 2px 0 2px 0;

input {
    float: left;
    width: 50px;
    height: 20px;
    margin: 3px 0 3px 10px;

I also tried using columns and no luck. Is there rules that I didn't add that is required for Firefox?

Problem courtesy of: Maxime Morin


This has been reported on bugzilla already, oddly you can't use column-count with the <fieldset> element - take a look at:

If you replace the <fieldset> with a <div> or any other element it will work

Solution courtesy of: Adrift


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.