Hi,

I was converting a design to html, when I came across a strange problem. I'm posting the essential situation here:

<html>
<head>
<style>
#div1 {
    height: 100px;
    width: 100px;
    background-color: red;
    border: 1px solid green;
}
#div2 {
    width: 50px;
    height: 140px;
    background-color: blue;
    border: 1px solid yellow;
}
</style>
</head>
<body>
<div id='div1'>
    <div id='div2'>
    </div>
</div>
</body>
</html>

The rendering in IE6 and Firefox 3 is different... In IE6, div1 is expanding to make div2 fit inside it, despite me specifying div1's height.

How can I fix this problem?

Thanks

2 answers

2
points
This was chosen as the best answer

This is due to the expanding box bug that IE6 rendering engine has, you can find more info at positioniseverything.net.

I don't know if this is valuable in your context but based on the mockup example you've given this is one possible solution:

<!--[if lt IE 7]>
<style type="text/css">
    #div1 {position: relative;}
    #div2 {position: absolute;}
</style>
<![endif]-->

You should put this IE-specific rules inside the conditional comment in a separate style sheet put I've neglected that here for pedagogic purposes. :)

Answered over 7 years ago by Jens Hedqvist
  • I read the article at the link you've posted. does it mean that there is no solution to my problem? In my case I absolutely need it. I need that the container *not* expand, and the inner division overflow. Harshath over 7 years ago
  • Thanks! Actually, I figured out this solution just before I read your update! :D Harshath over 7 years ago
0
points

why dont you use

overflow:auto;

for your div1. This will put a scrollbar in div1 when the height of div 2 overflows over div1

Answered over 7 years ago by Prasanna