title: should the contaner calculate the height for me?
body: <p>i have one div that contain three div for a part in my website
  code is like this:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div &gt;&lt;/div&gt;
  &lt;div id="div1"&gt;&lt;/div&gt;
  &lt;div id="div1"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>in css :</p>
  
  <pre><code>#container {
  margin: 0 auto;
  width: 950px;
  opacity: .5;
  filter: alpha(opacity = 50);
  background: #fff;}
  
  #div1 {
  width: 100%;
  height: 30px;
  background: black;
  float: left;}
  
  #div2 {
  margin:50px 0 50px 0;
  width: 950px;
  float: left;}
  
  #div3 {
  border: 1px solid black;
  width: 437px;
  height: 532px;
  margin: 18px;
  float: left;}
  </code></pre>
  
  <p>when i remove the <code>float:left</code> form the #container 
  then it's height will not be zero using firefox
  but when i add it back,it'll work correctly but i can not center the boy in browser window.</p>
  
  <p>how can i fix this?</p>