float-left not working for a series of divs

I have the following Javascript code:

{
var x = document.createElement('div'); 
x.setAttribute('class','rowone');
x.setAttribute('id',i);
var move = 4;
x.style.marginLeft = move + "%";
x.addEventListener('click',clickdata,'false');
} // creating each div block
{ 
var p = document.createElement('IMG');
p.style.width = "80%";
p.style.height="100%";
p.src = orderone[i];
x.appendChild(p);
} // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
} // creating first row and adding event listener
for(var j = 0; j < 8; j++){
{
var x = document.createElement('div'); x.setAttribute('class','rowtwo');
x.setAttribute('id',j+8);
var moverow = 4;
x.style.marginLeft = moverow + "%";
x.addEventListener('click',secondclick, 'false');
} // creating each div block
{ 
/*var p = document.createElement('p');
p.innerHTML = ordertwo[j];*/
var otherp = document.createElement('IMG');
otherp.style.width = "80%";
otherp.style.height="100%";
otherp.src = ordertwo[j];
x.appendChild(otherp);
} // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
}

(orderone and ordertwo are just the arrays of images)
What it does is that it creates two rows of divs, all divs having an image (from orderone or ordertwo). This is what it should look like:

However, the rows often just break up randomly (sometimes it works right, other times it just gives some other assortment, like below):

What do I do?

Set all the div containers to the same height and overflow to hidden like this:

.myDivs { 
height: 200px;
overflow: hidden;
}

Change the height to match the bulk of your images or the height of the tallest image. Anything that is taller than your height will be hidden