centered 2x2 grid

Question

Я пытаюсь собрать страницу с сеткой из четырех квадратных div в центре. Вот что у меня есть, я думаю, вы сможете увидеть, что я намеревался. Что мне здесь не хватает, чтобы сделать позиционирование так, как должно быть?

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

Удалить position: relative; из #topleft, #topright, #bottomleft, #bottomright. И добавьте position: absolute; в .box.

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

udpated jsfiddle (касаемо @Neils комментарий): http://jsfiddle.net/G85fM/1/