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

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

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?


2 answers

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;}

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 8 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 8 years ago
  • Thanks! Actually, I figured out this solution just before I read your update! :D Harshath over 8 years ago

why dont you use


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

Answered over 8 years ago by Prasanna