почему мой центр <div>не выровнен с моим левым <div>и правым <div>?

Question

Я пытаюсь собрать три div вместе. Один слева, один посередине, а другой справа.

Однако у меня проблема с тем, что середина не выровнена должным образом.

Мой текущий код HTML:

 <div class="three_contents">
     <div class="left">Left</div>
     <div class="right">Right</div>
     <div class="center">Center</div>
 </div>

Мой текущий код CSS:

.three_contents{
width: 900px;
border: 0px solid #000;
}

.left{float: left;
margin-top: 25px;
width: 290px;
height: 290px;}

.right{float: right;
margin-top: 25px;
width: 290px;
height: 290px;}

.center{display:block;
margin: 25px auto;
width: 290px;
height: 290px;}

Однако, когда я добавляю границу 1px в div трех_контентов, и средний div выравнивается. Я приложил два скриншота, и, надеюсь, кто-то может помочь мне решить эту проблему. Большое спасибо.

Проблема со средним div не выровнена:

После того, как я добавлю границу 1px, и средний div будет выровнен:

Answer 1

Поместите поле только по центру div. Вот так:

.three_contents
{
    width: 900px;
    border: 0;
}

.left
{
    float: left;
    border: solid 1px;
    width: 290px;
    height: 290px;
}

.right
{
    float: right;
    border: solid 1px;
    width: 290px;
    height: 290px;}

.center
{
    margin: 25px auto;
    display:block;
    border: solid 1px;
    width: 290px;
    height: 290px;
}

Я сделал скрипку, чтобы показать вам это: http://jsfiddle.net/stakL/1/

РЕДАКТИРОВАТЬ: Чтобы быть искренним, я также не совсем понимаю почему это происходит. Но я вижу, что свойство margin-top, установленное слева и справа div, занимало верхнюю позицию среднего div в качестве контрольной точки для применения этого поля.

Другими словами, центр div находился в 25 пикселях от вершины, а левый и правый div были в 25 пикселях от вершины middle div.