Задачка. Расчитать количество столбцов/колонок
 

Есть блок, размер которого будет меняться, надо написать формулу, по которой будут вмещаться в него элементы так, чтоб их соотношение сторон было равно до максимально возможного.
Если по простому, то надо аккуратно вставить заданное кол.прямоугольничков в блок.

Вот уже третий вариант написал, но все не то...

<style>
  #keyboard {
    height: 300px;
    width: 400px;
    padding: 0;
    border: 1px solid black;
    clear: both;
    overflow: hidden;
  }

  .key {
    float: left;
    border: 1px solid green;
  }
  </style>

<div id='keyboard'></div>

<script type='text/javascript'>
function Keypad(KeypadDiv) {
  var keypad = document.getElementById(KeypadDiv);
  var keys = '';

  var keypadWidth = parseInt(getComputedStyle(keypad, '').width, 10);
  var keypadHeight = parseInt(getComputedStyle(keypad, '').height, 10);

  var heightPercent = keypadHeight/(keypadWidth+keypadHeight)

  var keyHeight = 100/Math.floor(Math.pow(32, heightPercent));

  var keyWidth = 100/Math.ceil(Math.pow(32, (1-heightPercent)))


  for(var e=0; e<32; e++) {
    keys += '<div class=\"key\" style=\"width:'+ keyWidth+ '%; height:'+ keyHeight +'%; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;\" >' + String.fromCharCode(1072 + e) + '</div>';
  }
  keypad.innerHTML = keys;
}

var f = new Keypad('keyboard')
</script>

Такой вариант получше, но смущает необходимость использования модификатора и на некоторых вариантах не работает.

<style>
  #keyboard {
    height: 300px;
    width: 400px;
    padding: 0;
    border: 1px solid black;
    clear: both;
    overflow: hidden;
  }
 
  .key {
    float: left;
    border: 1px solid green;
  }
  </style>
 
<div id='keyboard'></div>
 
<script type='text/javascript'>
function Keypad(KeypadDiv) {
  var keypad = document.getElementById(KeypadDiv);
  var keys = '';
  var mod = 0;

  var keypadWidth = parseInt(getComputedStyle(keypad, '').width, 10);
  var keypadHeight = parseInt(getComputedStyle(keypad, '').height, 10);

  var h = keypadHeight/keypadWidth;

  while(Math.round(Math.sqrt(32/(1/h))+mod)*Math.round(Math.sqrt(32/h)) < 32) {
    mod++;
  }

  var keyHeight = 100/Math.round(Math.sqrt(32/(1/h))+mod);
  var keyWidth = 100/Math.round(Math.sqrt(32/h));

  console.log(Math.ceil(keypadHeight/keypadWidth*Math.sqrt(32)) +"  "+Math.floor(keypadWidth/keypadHeight*Math.sqrt(32))+ "  "+ keyHeight + "  " + keyWidth + "  "+ Math.ceil(Math.sqrt(32/(1/h))) + '   '+ 100/Math.round(Math.sqrt(32/h)))

  for(var e=0; e<32; e++) {
    keys += '<div class=\"key\" style=\"width:'+ keyWidth+ '%; height:'+ keyHeight +'%; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;\" >' + String.fromCharCode(1072 + e) + '</div>';
  }
  keypad.innerHTML = keys;
}

var f = new Keypad('keyboard')
</script>

И да, откуда берутся эти небольшие пустые места справа и внизу в браузерах окромя мозилы?
Предполагаю, что это особенности работы с дробными значениями размеров. Или не?