JS DOM Objects and the Style Attribute

Question

I have two sets of code:

var holder = document.createElement('div');

var a = document.createElement('div');
a.style.float = 'left';
a.style.width = '90px';
a.style.height = '90%';
a.style.border = '1px dotted black';

var b = document.createElement('div');
b.style.float = 'left';
b.style.width = '90px';
b.style.height = '90%';
b.style.border = '1px dotted black';

holder.appendChild(a);
holder.appendChild(b);

And:

var holder = document.createElement('div');

var a = document.createElement('div');
a.setAttribute('style', 'float:left; width:90px; height: 90%; border: 1px dotted black;');

var b = document.createElement('div');
b.setAttribute('style', 'float:left; width:250px; height: 90%; border: 1px dotted black;');

holder.appendChild(a);
holder.appendChild(b);

The first example doesn't work properly - 'b' sits below 'a'.

The second example works fine - 'b' sits to the right of 'a'.

Why?

Answer 1

This is inaccurate:

b.style.float ...

it should be

b.style.cssFloat ... // non-ie
b.style.styleFloat ... // ie

it's safe to set both properties for all browsers; neither will break the function of the other