javascript - Adding scrollbars to browser window when a div overflows -

javascript - Adding scrollbars to browser window when a div overflows -

before tell problem, allow me beginner in web development. working on webpage, gets items database, utilize javascript dynamically display them. purpose, utilize divs.

i have main div, contains several other, smaller ones. appear way want, problem starts when resize window: div "overflows" - parts of don't appear in resized browser. there no scrollbars either, can't scroll them.

i tried search net (including site) haven't found useful - because haven't used right expressions.

here code:

function tabledraw(){ //i create main div here: var maindiv = document.createelement('div'); maindiv.style.position = "absolute"; maindiv.style.marginleft = "280px"; maindiv.style.width = "auto"; maindiv.style.top = "0px"; maindiv.style.bottom ="0px"; maindiv.style.overflow="auto"; //a variable help me position rows of divs var rowcounter = 0; //here, create 3x5 divs; (currently) each 1 same size //if it's 1st row (index 0), append image them. //if it's 2nd or 3rd, set background color reddish //for debugging (so can see them). (var k=0; k<3; k++){ (var = 0; < 5; i++){ var newdiv = document.createelement('div'); newdiv.style.position = "fixed"; newdiv.style.marginleft =((i)*120) +"px"; newdiv.style.top = 10 + (rowcounter*125) + "px"; newdiv.id = "div" + i; newdiv.style.height = "125px"; newdiv.style.width = "100px"; newdiv.style.border ="thin solid"; if(k==0){ var img = document.createelement('img'); img.src = "/images/troops/" + (i+1) + ".png"; img.style.width = "100px"; img.style.height = "125px"; newdiv.appendchild(img); } else { newdiv.style.backgroundcolor = "red"; } maindiv.appendchild(newdiv); } rowcounter++; } //this same previous, has 4 columns. (var k=0; k<3; k++){ (var i=0; i<4; i++){ var newdiv = document.createelement('div'); newdiv.style.position = "fixed"; newdiv.style.marginleft = ((i)*120) +"px"; newdiv.style.top = 10 + (rowcounter*125) + "px"; newdiv.id = "div" + i; newdiv.style.height = "125px"; newdiv.style.width = "100px"; newdiv.style.border ="thin solid"; if(k==0){ var img = document.createelement('img'); img.src = "/images/troops/" + (i+6) + ".png"; img.style.width = "100px"; img.style.height = "125px"; newdiv.appendchild(img); } else { newdiv.style.backgroundcolor = "red"; } maindiv.appendchild(newdiv); } rowcounter++; } document.body.appendchild(maindiv); }

and can check current state of site: demo.

if i'd have guess, problem "absolute" , "fixed" positions.

i tried add together scrollbars, able manage scrollbars in divs, , no scrollbar @ side of window. way resize window 3 buttons on left side (created js, too) visible, then, bars appear.

is there way add together bars window, can scroll "overflowing" div parts?

thank help in advance!

(and sorry if code horrible)

there fundamental issues css , plan, can see have right thought wrong implementation. instead @ either using float:left hvae in-line elements or have css class manage using display: inline or similar. there lots of solutions online getting layout want, using fixed , absolute position isn't right one.

javascript html css scrollbar