James Dickens James Dickens - 4 months ago 11
CSS Question

Div not maintaining min-width inside another div, HTML

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

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