css - Div not maintaining min-width inside another div, HTML -

i have 3 classes of div containers. 1 outer container width:1200px, inner div rows each have inner div's desired size of 280 px. problem when create elements using dom countriesinnerdiv elements varying in size depending inside them.

here's have far:

 .countriesouterdiv1{     width: 1200px;         }       .countriesinnerdiv{     min-width:280px;         display:inline;       border:1px solid black;     }       .rowdiv {     width:100%;      }   here relevant javascript:  function addtable() {  var tablediv = document.getelementbyid("countriesouterdiv");  var i,j; var numcountries = 5; var numsectors = 5;    (i = 0; < numcountries; i++) { var rowdiv = document.createelement("div") rowdiv.classname = "rowdiv"; rowdiv.id = "row"+i;   (j = 0; j < numsectors + 1; j++) { var countrydata = document.createelement("div"); var sectorstring = string(i+1)+"_"+string(j); countrydata.classname =  "countriesinnerdiv"; countrydata.id = "countrydata"+sectorstring;   if (!((i ==0 && j == 0) ||  (i==0 && j ==1))) {     countrydata.style.display = "none";     }     if (j == 0 || (i == 0 && j == 1)) {     var countrydataselect = document.createelement("select");  var addbutton = document.createelement("button"); addbutton.id = "addbutton" + sectorstring; addbutton.innerhtml = "+"; if (j != 0) {     addbutton.setattribute('onclick','addordeletediv("add", "' + sectorstring + '");'); } else { if (i != numcountries - 1) {     addbutton.setattribute('onclick','addcountry("' + sectorstring + '")');     } if (i != 0) { var deletecountry = document.createelement("button"); deletecountry.id = "deletebutton" + sectorstring;  deletecountry.innerhtml = "-"; deletecountry.setattribute('onclick', 'deletecountry("' + sectorstring + '")');   }  }    countrydata.appendchild(countrydataselect);     if (i != numcountries - 1) {  countrydata.appendchild(addbutton);     } if (i!=0) {     countrydata.appendchild(deletecountry);   } rowdiv.appendchild(countrydata);   }      else if (j == numsectors) {   var countrydataselect = document.createelement("select");   var deletebutton = document.createelement("button"); deletebutton.id = "deletebutton" + sectorstring;   deletebutton.innerhtml = "-"; deletebutton.setattribute('onclick','addordeletediv("delete", "' + sectorstring + '");'); countrydata.appendchild(countrydataselect);  countrydata.appendchild(deletebutton);       }   else {   var countrydataselect = document.createelement("select");   var addbutton = document.createelement("button"); var adstring = "add"; addbutton.setattribute('onclick','addordeletediv("add", "' + sectorstring + '");'); addbutton.id = "addbutton" + sectorstring; addbutton.innerhtml = "+";     var deletebutton = document.createelement("button"); deletebutton.id  = "deletebutton" + sectorstring;   deletebutton.innerhtml = "-";     deletebutton.setattribute('onclick','addordeletediv("delete", "' + sectorstring + '");'); countrydata.appendchild(countrydataselect); countrydata.appendchild(addbutton); countrydata.appendchild(deletebutton);      } rowdiv.appendchild(countrydata); tablediv.appendchild(rowdiv); }//end of inner         }//end of outer        }//end of function 

its cose make div display:inline; .countriesinnerdiv{ min-width:280px;
display:inline-block;
border:1px solid black; }