Search code examples
htmlcsswebkitcss-floatmultiple-columns

Latest Chrome: float inside of -webkit-column broken

Intended form layout using columns:

key: value     |     key: value     |     key: value

key: value     |     key: value     |     key: value

key: value     |     key: value     |

key being fixed-width float: left inside of a multi-column layout.

<form>
    <label>
        <span>key:</span>
        <span><input value="value"/></span>
    </label>
    <label>
        <span>key:</span>
        <span><input value="value"/></span>
    </label>
    ...
</form>

As soon as setting -webkit-column-count on the <form>, the latest Chrome renders 'key' and value on top of each other.

Idea behind the floats is to allow the value input fields to take up the rest of the available space.

see http://jsfiddle.net/99ckf72q/, working as intended in Firefox.

Bug in WebKit?

Solution

  • seems to be fixed in Chrome 45.0.2454.9 / WebKit build 537.36