grille 2x2 centrée

Question

J'essaye de mettre en place une page qui a une grille de quatre divs carrés au centre. Voici ce que j'ai, je pense que vous serez en mesure de voir ce que je voulais arriver. Qu'est-ce qui me manque ici pour que le positionnement fonctionne comme il se doit?

http://jsfiddle.net/LKfd4/

HTML

<div id='main-container'> 
<div class='box' id='topleft'></div> 
<div class='box' id='topright'></div> 
<div class='box' id='bottomleft'></div> 
<div class='box' id='bottomright'></div> 

</div> 

CSS

#main-container{ 
    border:1px solid black; 
    width:980px; 
    height:700px; 
    margin:0 auto; 
    position:relative; 
    top:20px; 
} 

.box { 
    width:100px; 
    height:100px; 
    background:gray; 
    border:2px solid #696969; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; 
} 

#topleft{ 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    left:50%; 
    margin-top:-110px; 
    margin-left:-110px; 
} 
#topright{ 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    left:50%; 
    margin-top:-110px; 
    margin-left:10px; 
} 
#bottomleft{ 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    left:50%; 
    margin-top:10px; 
    margin-left:10px; 
} 
#bottomright{ 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    left:50%; 
    margin-top:10px; 
    margin-left:-110px; 
} 

Answer 1

Retirez position: relative; de #topleft, #topright, #bottomleft, #bottomright. Et ajoutez position: absolute; à .box.

jsFiddle: http://jsfiddle.net/G85fM/

udpated jsFiddle (en ce qui concerne @Neils commentaire): http://jsfiddle.net/G85fM/1/