Align 4 divs in CSS table

I saw that you coded the div elements as self-closing , which is wrong, you should always include the opening and closing tags of this HTML element.

In addition to this fix, I added the properties:

#todos {
    ...
    width: 100px;
    margin: auto;
}

I made a new version on link

Dear, I think the fastest and safest way is this:

HTML:

<div class="contentor">
    <div class="div1">a</div>
    <div class="div2">b</div>
    <div class="div3">c</div>
    <div class="div4">d</div>
</div>

CSS:

.contentor
{
    width: 100px;
    overflow: hidden;
}

.contentor > div
{
    width: 50%;
    float: left;
    box-sizing: border-box;
}

Test: link

PS: I edited the answer because I did not understand that you wanted 100px and two lines

Using only what your code posted, and only fixing what @ Sanction spoke of the self-closing tabs in the divs, here is a solution:

HTML:

<div id="todos">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>

CSS:

#todos{
    width:100px;
    height:100px;
    background-color:purple; /* somente para mostrar que o fundo não aparece*/
}

#div1, #div2, #div3, #div4 { /* Esse trecho do código é para evitar repetição.*/
    width:50px;
    height:50px;
    float: left;
}
#div1{
    background:red;
}
#div2{
    background:blue;
}
#div3{
    background:green;
}
#div4{
    background:yellow; 
}

link

I think this is what you intend:

#div-table {
  display: table;
  width: 200px;
}

#div-table div { 
  display: table-row;
  height: 100px;
}

#div-table div .cell { 
  display: table-cell;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

<div id="div-table">
    <div>
        <div class="cell green">1</div>
        <div class="cell blue">2</div>
    </div>
    <div>
        <div class="cell red">3</div>
        <div class="cell yellow">4</div>
    </div>
</div>