Align 4 Divs in CSS table

Question

I have 4 div created, as I can line up in the center in table. That is the first line with the two div and the second line with the others. Using the CSS display table and without using an HTML table.

Example: http://jsfiddle.net/pdg6jkan/1/

Answer 1

I saw you encoded the elements div as self-closing (<div id="div1"/>), what is wrong, you should always include the opening and closing tags of this HTML element.

In addition to this correction, I added the properties:

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

I made a new version on http://jsfiddle.net/pdg6jkan/3/

Answer 2

Using only what you posted in code, and only by fixing what @Sanction said about self-closing tabs on Divs, here’s 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; 
}

http://jsfiddle.net/z5f7oomp/

Answer 3

Dear, I think the quickest 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;
}

Testing: http://jsfiddle.net/4u7wtued/2/

PS: I edited the answer because I didn’t understand that you wanted 100px and two lines

Answer 4

I think this is what you want:

#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>