columns understanding

by roskoshinsky

HTML

<div class="container" >
    <div class="table" >
        <div class="row">
            <div class="cell">
            </div>
            <div class="cell">
            </div>
            <div class="cell">
            </div>
        </div>
    </div>
</div>

CSS

html {width:100%; height:100%;}
html * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:0px; margin:0px; border:0px; font-size:0px; font-weight:0; font-family:Helvetica, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {width:100%; height:100%;}

.container{position:relative; width:100%; height:100%;}
.box{position:absolute; width:100px; height:100px; border:1px solid black;}
.yellow{background:yellow;}
.green{background:green;}
.table{display:table; width:100%; height:100%;}
.row{display:table-row; width:100%;}
.cell{display:table-cell; background:yellow; border:1px solid black;}

JavaScript

/*
Проблема гуляющих пикселей. Если, к примеру, ширина не делится на равные части, то какие размеры получают колонки в автоматическом режиме рендеринга? Каков алгоритм автоматического рендеринга?
*/
console.clear();
console.log("end");