Why is my program creating a 10x9 grid instead of a 10x10 grid?

Question

My code works from a functionality standpoint. I want to create a "drawing pad" in that it creates a grid of small 'divs' that change color when the mouse goes over them. The 'divs' change color - but I don't understand why it is creating a 10 x 9 grid instead of a 10 x 10 grid?

// When the document is ready...
$(document).ready(function() {
  // Do some things...
  newGrid(10); // create a new 10 x 10 grid
  $(".block").hover(function() {
    $(this).css('background-color', 'white');
  });
});

function newGrid(gridNum) {
  var maxDivs = gridNum * gridNum;
  var currentDivNum = 1; // Current number of divs; will have 100 total by default

  while (currentDivNum <= maxDivs) {
    // While the current div number is less than max divs...
    div = document.createElement('div');
    div.className = 'block'; // set the class name of the divisions
    document.body.style.backgroundColor = 'red';
    if (currentDivNum % gridNum == 0) { 
      div.style.float = 'clear';
      div.style.backgroundColor = '#000000';
    } else {
      div.style.float = 'left';
      div.style.backgroundColor = '#000000';
    }
    div.style.width = '25px';
    div.style.height = '25px';

    document.getElementById('divContainer').appendChild(div);

    currentDivNum++;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divContainer"></div>

Answer 1

Find this working example, just insert a clear div after each 10:

// When the document is ready...
$(document).ready(function() {
// Do some things...
newGrid(10); // create a new 10 x 10 grid
    $(".block").hover(function() {
       $(this).css('background-color', 'white');
    });
});

function newGrid(gridNum) {

var maxDivs = gridNum * gridNum;
var currentDivNum = 1; // Current number of divs; will have 100 total by default

while (currentDivNum <= maxDivs) {
    // While the current div number is less than max divs...

    div = document.createElement('div');
    div.className = 'block'; // set the class name of the divisions
    document.body.style.backgroundColor = 'red';
  
    div.style.float = 'left';
    div.style.backgroundColor = '#000000';
  
    div.style.width = '25px';
    div.style.height = '25px';

    document.getElementById('divContainer').appendChild(div);
  
    if (currentDivNum % gridNum == 0) { 
      clearDiv = document.createElement('div');
      clearDiv.style.clear = 'both';
      
      document.getElementById('divContainer').appendChild(clearDiv);

    } 
  

    currentDivNum++;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContainer"></div>

Explanation

div.style.float = 'clear'; is not valid, since float does not take clear as a value, so what you really need is to enter a div where it clears the float for both left and right i.e Both and this is added after each X divs :

if (currentDivNum % gridNum == 0) { 
          clearDiv = document.createElement('div');
          clearDiv.style.clear = 'both';

          document.getElementById('divContainer').appendChild(clearDiv);

        } 

Apart of that, the code enters divs in a normal manner..

Answer 2

Following is not valid:

 div.sytle.float = 'clear';

See working JSFiddle that corrects the problem: https://jsfiddle.net/cwpxy8dv/

The solution is to keep all items floating left, and go to the next row by applying clear left for every tenth item.

Key part of the solution is the following snippet:

div.style.float = 'left'; // set for all grid divs
if ( (currentDivNum-1) % gridNum == 0) { // use currentDivNum-1 since it starts at 1
  div.style.clear = 'left';  // clear to next row
}