Let me start by saying I have always struggled with CSS positioning. It seems like I am missing something simple here...
So, I have a JS script that generates divs within a parent container called #container which is set to absolute position. Here is the CSS:
#container{
position: absolute;
}
#container div{
position: relative;
}
The function responsible for creating the divs is as follows:
function newLine(){
var id_num = ++line;
var _new;
var i;
for(i = 0; i < width; i++){
_new = document.createElement('div');
_new.innerHTML = randomChar();
_new.id = id_num;
_new.style.left = i*10+'px';
_new.style.top = 0;
document.getElementById('container').appendChild(_new);
}
}
Everything seems to be set up correctly. The horizontal positioning is working fine. However, the vertical positioning is the issue. Instead of appearing next to each other, the rows are moving further away from the top of the div. I believe this could be a simple fix that I am overlooking, but I can't seem to figure it out. Any help would be greatly appreciated!