title: how to make three inside divs the same height?
body: <p>I have a container div#content, which contains three divs inside. Now, how could I make sure that three divs inside have the same height? Of course, I hope each div's height could be expanded according to its content. For example: 
  here is what I tried</p>
  
  <pre><code>&lt;!doctype html public "-//w3c//dtd html 4.0 transitional//en"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style type="text/css"&gt;
     #content{background-color:#DDDDD;width:100%;overflow:auto;clear:both;height:100%;}
     #col1{background-color:yellow;width:10%;float:left;height:100%;}
     #col2{background-color:red;width:30%;float:left;height:100%;}
     #col3{background-color:#AAAAAA;width:10%;float:left;;height:100%;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="content"&gt;
   &lt;div id="col1"&gt;
       &lt;script language="javascript"&gt;
   for(i=0;i&lt;1000;i++){
   document.write(i+"&lt;br /&gt;");
   }
   &lt;/script&gt;
   &lt;/div&gt;
   &lt;div id="col2"&gt;
        &lt;script language="javascript"&gt;
   for(i=0;i&lt;100;i++){
   document.write(i+"&lt;br /&gt;");
   }
   &lt;/script&gt;
   &lt;/div&gt;
   &lt;div id="col3"&gt;
         &lt;script language="javascript"&gt;
   for(i=0;i&lt;10;i++){
   document.write(i+"&lt;br /&gt;");
   }
   &lt;/script&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>
  
  </p>