css - コンテンツを中央に配置し、内側に浮かせる

Question

フロートについて混乱しています: 内部に 2 つの項目がある div メニューがあります。マージン0 autoで中央に配置します。青と赤をフロートに入れると、中央に配置されなくなり、コンテンツから外れます。私はなぜなのか理解していない？

例を次に示します: http://jsfiddle.net/A4FHd/

CSS:

#content{
    margin:0 auto;
    width:400px;
    background:yellow;
}

#text{
    margin:0 auto;
    text-align:justify;
}

#menu{
    margin:0 auto;
    z-index:0;
    background:grey;
}

#blue{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:blue;
}
#red{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:red;
}

HTML:

<div id="content">

    <div id="text"> 
    some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
    </div>

    <div id="menu"> 
        <div id="red"> </div>
        <div id="blue"> </div>
    </div>

</div>