Ok, here it goes. I have a project that is certainly more important than showing colorful boxes, but I can’t seem to figure out why divs overflow the way that they do when they are nested. I have layed out a simple example and hopefully someone can explain to me why things happen this way, because if I grasp this I believe I can solve my more important problems.
Here is the code:
<div style="background: green; width: 70px; height: 50px;">
<div style="width: 60px; height 50px; background: yellow;">
<div style="width: 50px; height 50px; background: orange;">
test 1 <br/>
test 1 <br/>
test 1 <br/>
test 1 <br/>
test 1 <br/>
test 1 <br/>
test 1 <br/>
</div>
</div>
</div>
<div style="width: 50px; height 50px; background: red;">
test 2
</div>
Here is what it looks like in Chrome, Firefox, etc:
Here is what it looks like in IE:
I have a few questions that Google refuses to deliver to my doorstep.
I understand why the Chrome/Firefox yellow box overflows past the height of the green box. This is because of the default overflow: visible, right?
Why does the green box expand in IE? This is the crux of the problem because I want my orange box to “run into” my red box (just like the
Chrome/Firefox example). I think it has to do with the green box expanding.
Why doesn’t the orange box overflow outside of a 50px high yellow box in either browser? This is probably the second most important question. I can’t find any explanation for this.
I’m so embarrassed that I had those errors. I blame copy and paste and I’m truly sorry for wasting your time on that.
Fixing the syntax errors actually made things perform in firefox like I assumed they would, so for that I am satisfied that my intuition was correct.
However for IE7, the code that you provided shows like this, with or without relative positioning:
I am positive this was in IE7, and I’m pretty sure it happens in IE8 also. The overflow hidden is not what I’m looking for. I’m ultimately looking for the orange box to cover up the red box, without resizing the the green or yellow boxes. Can that be done in any way?
Hi,
For starters you have some errors in the code you posted.
You are missing the colon after height on two of your divs.
height 50px;
It should be - height: 50px;
I understand why the Chrome/Firefox yellow box overflows past the height of the green box. This is because of the default overflow: visible, right?
That is correct, but once you fix your errors it will not render as your screenshot shows it.
The only difference I see in IE when the code is corrected is that it stacks the last div (with red BG) above the innermost nested div.
That can be made to render like FF by setting position:relative on that innermost div for IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
#wrap {
width:70px;
height:50px;
background:green;
}
#a {
width:60px;
[B]height:50px;[/B]
background:yellow;
}
#b {
width:50px;
[B]height:50px; [/B]
background:orange;
[B]position:relative;[/B]
}
#c {
width:50px;
[B]height:50px; [/B]
background:red;
}
</style>
</head>
<body>
<div id="wrap">
<div id="a">
<div id="b">
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
</div>
</div>
</div>
<div id="c">
test 2
</div>
</body>
</html>
Are you using a native copy of IE7? Because when I run IE7 via IEtester or IE8/Developer tools it does not render as your screenshot shows. IE7 and IE8 both render it just like FF for me.
I’m ultimately looking for the orange box to cover up the red box, without resizing the the green or yellow boxes. Can that be done in any way?
Well if you can’t use overflow:hidden then you will need to remove the orange div from the page flow by setting it as position:absolute;
You will need to remove the height as well if you want the orange BG to cover the red div.
I set a 5px left margin on the red div to let it peek through from beneath the orange div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
#wrap {
width:70px;
height:50px;
background:green;
}
[B]#a[/B] {
width:60px;
height:50px;
background:yellow;
[B] position:relative;[/B] /*set containing block for #b div*/
}
[B]#b[/B] {
width:50px;
[COLOR=Red]/*height:50px;*/[/COLOR]
[B]position:absolute;
top:0;left:0; [/B]
background:orange;
}
#c {
width:50px;
height:50px;
background:red;
margin-left:5px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="a">
<div id="b">
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
</div>
</div>
</div>
<div id="c">
test 2
</div>
</body>
</html>
To keep IE6 from stretcing the div heights with the nested divs you had I would be inclined to go about it a different way.
All the divs you want behind the orange div with fixed widths/heights I would absolute position them and I would not nest other divs in them. Stack them just like you want them to appear on the page.
I would wrap them all in a parent div without a height and leave the last orange div as a static block.
Like this -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
#wrap {
width:70px;
background:#CDF;
position:relative;/*establish containing block for AP children*/
}
#a {
width:70px;
height:50px;
position:absolute;
top:0;
left:0;
background:green;
}
#b {
width:60px;
height:50px;
position:absolute;
top:0;
left:0;
background:yellow;
}
#c {
width:50px;
height:50px;
position:absolute;
top:50px;
left:5px;
background:red;
}
#d {
width:50px;
background:orange;
position:relative;/*stack above AP divs*/
}
</style>
</head>
<body>
<div id="wrap">
<div id="a">green div</div>
<div id="b">yellow div</div>
<div id="c">red div</div>
<div id="d">
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
test 1 <br>
</div>
</div>
</body>
</html>
Are you using a native copy of IE7? Because when I run IE7 via IEtester or IE8/Developer tools it does not render as your screenshot shows. IE7 and IE8 both render it just like FF for me.
Yes, I am using a native copy. I just checked with someone using a native copy of IE8 and it still appears like my screen shot.
I figured it out… My problem was my doc type declaration wasn’t at the very top. My bad. :headbang:
Can you explain why putting the position to relative causes the div to appear to be z-indexed on top? In other words, why does setting to relative somehow make it cover everything else?
Ah yes, you were in quirksmode. No wonder that was happening.
Positioned elements auto stack according to their order in the html. With the last one in the source coming out on top of the stack.
I had all the other fixed dimension divs as AP so I just added RP to that last orange div to keep the stacking order going. To sum it up, I had every div positioned but that last one was not removed from the page flow.
That allows it to expand the parent div (#wrap).
