Can't set element.style.float in Firefox?

Question

I've posted the following javascript code as a fiddle. It's pretty basic, and works fine in IE11 and in Chrome, but FireFox quietly throws away my float settings. When I inspect the elements with FireBug, neither of them have float set in their style.

Why?

Surfing the web, I've gotten the vague impression that it has something to do with width needing to be set somewhere, but where? And if that's the issue, is there a way for me to do this in firefox without knowing the width of the container?

var titleElem = document.createElement("div");
    titleElem.innerHTML = "Testing";
    titleElem.setAttribute("unselectable", "on");
    titleElem.style.border = "0px transparent";
    titleElem.style.width = "auto";
    titleElem.style.float = "left";
    titleElem.style.whiteSpace = "nowrap";
    titleElem.style.overflow = "hidden";
    titleElem.style.position = "relative";

document.body.appendChild(titleElem);

    rangeElem = document.createElement("div");
    rangeElem.setAttribute("unselectable", "on");
    rangeElem.style.width = "auto";
    rangeElem.style.border = "0px transparent";
    rangeElem.style.float = "right";
    rangeElem.style.whiteSpace = "nowrap";
    rangeElem.style.overflow = "hidden";
    rangeElem.style.position = "relative";
    rangeElem.style.fontSize = "x-small";
    rangeElem.style.paddingRight = "5px";
    rangeElem.className = "rangeDiv";
    rangeElem.innerHTML = "<i>[1234 - 5678]</i>";

document.body.appendChild(rangeElem);

Answer 1

Try changing that line to

titleElem.style.setProperty('float', 'left')

Or,

rangeElem.style.cssFloat = 'left'

also works.

Answer 2

You use .cssFloat to access that style property.

titleElem.style.cssFloat = "left";

Apparently, this has to do with float being a reserved word in javascript.