Question

First off, I must apologize. CSS positioning has always been the bane of my existence and this is likely something simple that I’m just completely missing…

Anyway, I have a JS script that’s generating divs. Each div is within the parent #container which is absolute positioned. CSS below:

#container{
  position: absolute;
}
#container div{
  position: relative;
}

The function creating the divs is:

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 above is properly initialized. The left positioning works perfectly. The only issue is the vertical positioning. Instead of all the row displaying next to each other, they’re progressively increasing away from the top of the div. I’m sure this is something trivial that I’m completely looking over, but I’m stumped… Help would be very much appreciated!

Answer 1

The rows as position: relative – this lays them out statically and then moves them the specified number of pixels. You want to use absolute positioning.