title: Div is not as tall as the total height of its floated children
body: <p>OK, I'm really having problems understanding the behavior of the float property.</p>
  
  <p>The page is 750 px wide. In order to keep it positioned in the center of the screen, I used this code:</p>
  
  <pre><code>&lt;div align="center"&gt;
      &lt;div align="left" style="width:750px; border-style:double;"&gt;
          stuff
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The elements within the main 750 px wide container are other containers that have the following styles:</p>
  
  <pre><code>div.infoCont //these containers usualy have two more containers within- for an image and text
  {
      width: 740px;
      position: relative;
      left: 2px;
      border-style: double; //for debugging
      float: left;
  }
  div.textContNI //text only
  {
      width: 730px;
      float: left;
      clear: right;
      border-style: double; //for debugging
  }
  </code></pre>
  
  <p>The small containers behave normally (they should be, because they are positioned and as big as the way I want to). But the height of the main container is A LOT less that the total height of the smaller containers... 0 px. It ignores the height of ALL the smaller containers.</p>
  
  <p>This can be "fixed" by adding text right before the closing tag of the main container. I can also manipulate the height with <code>&lt;br&gt;</code> tags and no text: the height becomes as big as the total height of the borders. Another way to "fix" the problem is to add <code>float:left;</code> in the style, but that positions the container on the left side of the window and I can't have that.</p>
  
  <p>I'm missing something and I don't know what it is.</p>
  
  <p>Why does the main container ignore the total height of the containers within it and how can I take care of this bug?</p>