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

Question

I have three classes of div containers. One is an outer container
with width:1200px, with inner div rows that each have inner div's with a
desired size of 280 px. My problem is that when I create the elements
using the DOM that the CountriesInnerDiv elements are varying in size depending what is inside them.
Here's what I have so far:
.CountriesOuterDiv1{
width: 1200px;
}
.CountriesInnerDiv{
min-width:280px;
display:inline;
border:1px solid black;
}
.RowDiv {
width:100%;
}
Here is the relevant Javascript:
function AddTable() {
var TableDiv = document.getElementById("CountriesOuterDiv");
var i,j;
var NumCountries = 5;
var NumSectors = 5;
for (i = 0; i < NumCountries; i++) {
var RowDiv = document.createElement("div")
RowDiv.className = "RowDiv";
RowDiv.id = "Row"+i;
for (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 for
}//End of outer for
}//end of function

Answer 1

Its cose you make this div display:inline; do like this .CountriesInnerDiv{
min-width:280px;
display:inline-block;
border:1px solid black;
}

Answer 2

Basically, what you're experiencing, is most likely that the inner element is just too big in it's minimal size to fit the parent one when the window is small... well.. we can't have an inside bigger than an outside... unless you use
overflow: scroll;
This will make the parent element scrollable so you can visualize the child by scrolling...
or...
.parent{min-width: 280px}
wich will make the parent has the same minimum width...