Can anyone explain to me why the green sub_container in the following code doesn't expand down to fill the red main_container?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
html, body {margin:0; padding:0; height:100%;}
div#main_container {min-height:100%; background:red;}
div#sub_container {height:100%; background:green;}
</style>
</head>
<body>
<div id="main_container">
<div id="sub_container">
Test.
</div>
</div>
</body>
</html>
I've tested this on the latest versions of FireFox and Internet Explorer, and in both cases, the sub_container stays tight around its own content, rather than expanding to fill its parent.
Note: I realise that if I change the main_container's min-height style to a height style, it will appear to work, but that would throw up a whole other issue (if the contents of sub_container gets large enough to extend below the bottom of the browser window, the background won't extend with it).