In the HTML below I'm facing 2 problems:

1) The random string generated does not fit within the 15% width of the td. I'm not sure how I can have a div be the maximum width of its parent td (in this cas 15% of the width of the screen and a min-width of 200px)

2) I'm not sure what % height to give #row2 because while I want the whole table to be 100% height / width (and #row1 to be a little bigger than #row2 - eg 60 / 40), but I want #row2 to be fixed at a height of 20px.

(note: the js at the top is just meant to generate random strings and it's working properly)

Code:
<html>
<head>
<script language="javascript" type="text/javascript">
  function randomString(string_length) {
  	var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
  	var randomstring = '';
  	for (var i=0; i<string_length; i++) {
  		var rnum = Math.floor(Math.random() * chars.length);
  		randomstring += chars.substring(rnum,rnum+1);
  	}
  	return randomstring;
  }
  function FillData(){
    document.getElementById("query_div").innerHTML = randomString(1000);
  }
</script>

<style type="text/css">
  #global_table{
    /*max-height: 300;
    max-width: 500;
    table-layout:fixed;*/
    height:100%;
    width:100%;
    max-height:1500px;
  }
  #col1{
    min-width:200px;
    width:15%;
  }
  #col2{
    min-width:200px;
    width:20%;
  }
  #col3{
    min-width:200px;
    width:25%;
  }
  #col4{
    min-width:200px;
    width:15%;
  }
  #col5{
    min-width:200px;
    width:25%;
  }
  #row1{
    min-height:200px;
    height:50%;
  }
  #row2{
    max-height:20px;
    height:5%;
  }
  #row3{
    min-height:200px;
    height:45%;
  }
  #left_box{
  }
  #query_div{
    overflow:hidden;
    word-wrap: break-word;
    /*width:400px;*/
  }
  .hidden{
    /*visibility:hidden;*/
  }
</style>  
</head>
<body onload="FillData()">
<table id="global_table" border="2">
  <colgroup>
  <col id="col1"/>
  <col id="col2"/>
  <col id="col3"/>
  <col id="col4"/>
  <col id="col5"/>
  </colgroup>
  <tr id="row1">
    <td id="left_box" rowspan="3"><div id="query_div">Test</div></td>
    <td><div id="box1_div">Box 1</div></td>
    <td colspan="2"><div id="box2_div">Box 2</div></td>
    <td><div id="box3_div">Box 3</div></td>
  </tr>
  <tr id="row2">
    <td rowspan="2" colspan="2"><div id="box4_div">Box 4</div></td>
    <td colspan="2"><div id="box4_div">Box 5</div></td>
  </tr>
  <tr id="row3">
    <td colspan="2"><div id="box6_div">Box 6</div></td>
  </tr>
</table>
</body>
</html>