I am faced with two different blocks 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);
Then, there's another set of code:
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 piece of code fails to display correctly as 'b' ends up below 'a'.
In contrast, the second block works perfectly well as it positions 'b' to the right of 'a'.
What could be causing this discrepancy?