...

View Full Version : 100% height in IE in a container div



reubenb
11-09-2006, 08:21 AM
Hi there!

Will someone please able to tell me why the below doe snot work in IE6?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<style type="text/css">
<!--

.box {
position:absolute;
top: 0px;
left: 137px;
z-index:512;
background-color:#003366;
width:20em;
height:100%;

}

#container {
position: relative;
top: 0px;
left:0px;
margin-left: auto;
margin-right: auto;
height: auto;
width: 100%;
z-index: 0;
background-color:#124742;
}

-->
</style>



</head>
<body>
<div id="container">
<div class="box"></div>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>
blah blah<br>

</div>
</div>
</body>
</html>

Since the box div is set to 100%, it should fit to the end of the container div but it doe snot. all other browsers it does

any ideas? please?

_Aerospace_Eng_
11-09-2006, 07:24 PM
Once you make .box position:absolute the #containing div should ignore it because its taken out of flow. I'm not sure what type of layout you are after but from what you've given this has the same effect.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
background:#124742;
color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#container {
background-color:#124742;
margin-left:137px;
border-left:300px solid #036;
min-height:100%;
}
* html #container {
height:100%;
}
#left {
margin-left:-437px;
width:137px;
position:relative;
}
#left p {
margin:0;
padding:5px;
text-align:justify;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc purus sapien, dictum nec, lobortis sit amet, venenatis a, eros. Aliquam condimentum. Aliquam ullamcorper luctus nulla. In viverra. Curabitur accumsan. Donec vitae erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales convallis magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed arcu. Duis dictum, turpis sed consequat scelerisque, nisl odio hendrerit sapien, congue scelerisque nulla arcu in felis. Maecenas nec dolor. Integer hendrerit sagittis nunc. Nullam condimentum. Nullam et tellus ut justo mollis aliquet. </p>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum