title: Css div styling
body: <p>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?</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="id1"&gt;&lt;/div&gt;
      &lt;div id="id2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Style.css is </p>
  
  <pre><code>#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;
  }
  </code></pre>