Css div styling

Question

У меня есть один div, он содержит два div внутри, я включаю исходный код ниже, вопрос: если я уменьшаю масштаб в firefox, хром из тезисов divs второй div вытекает из его места и стоит ниже первого div, как мне написать css, чтобы он остался на своем месте?

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

style.css является

#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

Это происходит потому, что если вы отдалять уменьшит размер элемента на экране. Но поскольку граница настолько мала, они больше не могут уменьшить ее размер, поэтому она останется прежней.

Если вы действительно хотите исправить это, вы должны увеличить ширину #container примерно до 652px.