Css div styling

Question

I have one div, it contains two divs inside it, I'm including the source code below, question is: if I zoom out in the firefox, chrome from theses divs second div flows out from it's place and stands below the first div, how should I write css in order it stayed in it's place?

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

Style.css is

#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;
}

Answer 1

This is because if you zoom out the will decrease the size of the element on the screen. But because the border is so small they can't decrease the size of it anymore, so it will stay the same.

If you really want to fix it you should increase the width of #container to about 652px .