Hi,
I am developing a reusable ASP.net server control that needs to work in IE 6+, FF 2+ and Safari both Quirks and Standards mode.
The control will expose two user definable properties height and width both of these attributes can be defined as either a percentage or as a pixel value.
Inside the control I have two column Divs that contain a navigation bar and the controls contents. The columns need to be a Div to make use of the overflow style when the content is bigger than the container. See example prototype code below;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="height: 100%; width:400px; background-color: Green; ">
<div style="height: 100%; width: 25%; background-color: Red; float:left; overflow:auto;">
LongString:<br />Stuffsdfsfdsdfsfsdfdfsdfsdfsdfsdfsdxgsdfgsdfgsdgiusdfgiudfgifdgu
</div>
<div style="height: 100%; width: 75%; background-color: Pink; float:right;">
Stuff
<br />
More stuff
<br />
And some more
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The issue I run into is that in standards mode when using percent base height, the divs as expected only render as big as their content. It appears that the only way to resolve this issue is to use JavaScript.
This then creates issues in that the control can re-render asynchronously using AJAX and the heights get out of sync.
Is what I am trying to achieve impossible or am I looking in the wrong place?
Nick