Forum Moderators: not2easy
I can't for the life of me figure out why a nested will not stretch to fit the parent div at a 100% height in Firefox or Netscape. It works fine in IE 5.5+ and Opera 5.12+. I have read through several topics in this forum regarding the issue and applied some of the techniques, however it still does not seem to be working.
You can view my quandary here [launch325.com]
I have also placed the code below. The problem div is #nav (a.k.a. the dark blue area). I would like for it to fill the div entitled #mid (a.k.a. the lighter blue). Thanks for any assistance you can provide.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
BODY, HTML {
height: 100%;
min-height: 100%;
margin: 0px;
}
#main {
height: 100%;
min-height: 100%;
background-color: #000066;
color:#FFFFFF;
font-size: 12px;
}
div>#main {
height: auto;
}
#top {
text-align: center;
height: 198px;
background-color: #999999;
width: 100%;
float: left;
clear: right;
}
#mid {
background-color: #00CCFF;
text-align: center;
width: 100%;
height: 100%;
min-height: 100%;
float: left;
clear: left;
}
div>#mid {
height: auto;
}
#bot {
text-align: center;
background-color: #990000;
width: 100%;
height: 150px;
float: left;
}
#nav {
width: 776px;
background-color: #0000CC;
text-align: center;
margin: 0 auto;
height: 100%;
min-height: 100%;
}
div>#nav {
height: auto;
height: inherit;
}
#content {
width: 776px;
margin: 0 auto;
background-color: #CC9999;
height: 100%;
min-height: 100%;
font-size: 12px;
}
#leftcol {
width: 171px;
background-color: #009933;
float: left;
clear: both;
height: 100%;
min-height: 100%;
}
div>#leftcol {
height: auto;
}
</style>
</head>
<body>
<div id="main">
<div id="top">1</div>
<div id="mid">
<div id="nav">2</div>
</div>
</div>
<div id="bot">3</div>
</div>
</body>
</html>
div>#mid {
height: auto;
}
Thanks.
