...

View Full Version : Limiting the width and height of a div in a table



aerain
08-07-2011, 12:08 AM
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)



<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum