The best way to show you the problem is by an example so please refer to the
HTML code below.
Looking at the code below when you resize the browser window so that it is
smaller than the green dashed "content" div the inner div which is red does not
stay at 100% of its parent (content) div and it resizes to browser windows
client area. On browsers other than IE however the inner div stays at 100% of
its parent "content" div. Which is the correct behavior? How can I make IE
to also keep the inner red div at 100% of its parent div size?
Thanks
Ben
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" >
<html>
<head>
<title>Test: Width and Overflow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="J.Tremmel">
<style type="text/css">
body { color:#040; background:#FFF; font:.9em/1.2 sans-serif;
margin:0; }
table { border:1px solid #888; width:100%; }
td, th { border:1px solid #DDD; white-space:nowrap; }
/* table display format is needed for FireFox to work correctly */
#keepInside { display:table ; margin: 15px 15px 0px 15px;}
#content { border: 12px dashed #AFA; }
#innerDiv { border: 2px solid red; }
</style>
</head>
<body>
<div id="keepInside">
<div id="content">
<div id="innerDiv">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.</div>
<br>
<table>
<tr><th>A table with a long (non-wrapping) row</th></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet…</td>
</tr>
</table>
</div>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
