Css div-styling

Ich habe ein div, es enthält zwei divs, ich bin auch der source-code weiter unten, die Frage ist: wenn ich den zoom in firefox, chrome Thesen divs zweiten div strömt vom Ort und steht unter dem ersten div, wie soll ich schreiben css in Ordnung blieb er an seinem Platz?

<div id="container">
    <div id="id1"></div>
    <div id="id2"></div>
</div>

Stil.css ist

#container {
    width: 646px;
    height: auto;
    margin:0 auto;
    padding:0;
}

 #id1 {
    float: left;
    width: 315px;
    height: 115px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    box-shadow: 0 1px 1px #cccccc;
}

 #id2 {
    float: left;
    width: 314px;
    height: 115px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    box-shadow: 0 1px 1px #cccccc;
    margin-left:13px;
}