title: how to make a div to wrap two float divs inside?
body: <p>I don't know if it's a common problem, but I can't find the solution in web so far.
  I would like to have two divs wrapped inside another div, however these two divs inside have to be align the same level (for example: left one takes 20%width of the wrappedDiv, right one take another 80%). To achieve this purpose, I used the following example CSS. However, now the wrap DIV didn't wrap those divs all. The wrap Div has a small height than those two divs contained inside. How could I make sure that the wrap Div has the largest height as the contained divs? Thanks!!!</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1"&gt;
      &lt;title&gt;liquid test&lt;/title&gt;
      &lt;style type="text/css" media="screen"&gt;
          body
          {
              margin: 0;
              padding: 0;
              height:100%;
          }
          #nav
          {
              float: left;
              width: 25%;
              height: 150px;
              background-color: #999;
              margin-bottom: 10px;
          }
  
          #content
          {
              float: left;
              margin-left: 1%;
              width: 65%;
              height: 150px;
              background-color: #999;
              margin-bottom: 10px;
          }       
          #wrap
          {
            background-color:#DDD;
            height:100%;
          }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrap"&gt;
      &lt;h1&gt;wrap1 &lt;/h1&gt;
      &lt;div id="nav"&gt;&lt;/div&gt;
      &lt;div id="content"&gt;&lt;a href="index.htm"&gt;&amp;lt; Back to article&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>