Home/ Questions/Q 6213293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T06:40:14+00:00

Problem is simple. I want a full height div (#inner) inside another full height

  • 0

Problem is simple.

I want a full height div (#inner) inside another full height div (#outer, but with paddings).

This code is rendered correctly in firefox and IE8 but not in IE7 and IE6.

Edit: In the context I use this structure, I forced to set postition:absoulte for #outer.

http://jsfiddle.net/8wVQp/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<style>
#outer {
 position: absolute;
 top:0;
 bottom:0;
 right:0;
 left:0; 
 padding: 50px;
 background-color: #FEE;
 height:auto;
}
#inner {
 height:100%;
 background-color: #FDD;
}
</style>
<div id="outer">
 <div id="inner"></div>
</div>

</body></html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    this is a bug in IE6 & IE7.. you need to set the outer div with fixed height for the inner div to behave properly.

    change your CSS to something like this

    <style>
#outer {
 position: absolute;
 top:0;
 bottom:0;
 right:0;
 left:0; 
 padding: 50px;
 background-color: #FEE;
 height:140px; /* notice the height is in pixels not % */
}
#inner {
 height:100%;
 background-color: #FDD;
}

    things would start to work.. you can use javascript to identify the browser & apply the css accordingly.

    • 0