A
Andrey Tarasevich
Hello
Consider the following HTML/CSS code
http://home.comcast.net/~andrey-t/test_bump.html
(full code is quoted below)
What I have there is two default-width fixed-height divs, one under another -
yellow and green. The top div contains a square-shaped right-floated div (red),
which is too tall for its parent, so it sticks out through the bottom (the
parent div has 'overflow' set to 'visible').
Now the question is: should the bottom div (green) bump into the protruding
portion of the red div or should it span the full width of the parent as if the
protruding portion is not there?
In IE 7 the bottom div is reliably ignoring the red div. In Opera, Firefox and
Safari the behavior of the bottom div depends on its 'overflow' property, which
I find rather surprising. By default, the bottom div will "ignore" the red div,
just like it is in IE. But if I explicitly specify 'overflow: hidden' for the
bottom div, it beings to "bump" into the red div, refusing to span the full with
of the parent. I kind of thought that 'overflow' property is mostly intended to
control "internal" behavior of the div (i.e. inner things that are trying to
stick out), but in this case it appears to affect what I'd informally refer as
its "external" behavior.
Can anyone please shed some light on this issue? Why does 'overflow: hidden'
make the bottom div to bump into the red div in this example in the
abovementioned browsers?
The code below (and at the link provided earlier) contains two identical groups
of divs (three divs each) with the only difference of the bottom (green) div in
the second group having its 'overflow' property set to 'hidden'.
Thank you,
Andrey
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html { margin: 0; padding: 0; height: 100% }
body { margin: 0; padding: 0; height: 100%; background: silver }
div.content {
width: 70%; height: 100%; margin: 0 auto; background: white
}
div.top {
height: 50px; margin: 0; overflow: visible; background: yellow
}
div.bottom {
height: 50px; background: green
}
div.drop {
height: 90px; width: 90px; float: right; position: relative;
margin: 10px 10px 0 0; background: red
}
</style>
<head>
<body>
<div class="content">
<div class="top">
<div class="drop"></div>
</div>
<div class="bottom"></div>
<hr>
<div class="top">
<div class="drop"></div>
</div>
<div class="bottom" style="overflow:hidden"></div>
</div>
</body>
</html>
Consider the following HTML/CSS code
http://home.comcast.net/~andrey-t/test_bump.html
(full code is quoted below)
What I have there is two default-width fixed-height divs, one under another -
yellow and green. The top div contains a square-shaped right-floated div (red),
which is too tall for its parent, so it sticks out through the bottom (the
parent div has 'overflow' set to 'visible').
Now the question is: should the bottom div (green) bump into the protruding
portion of the red div or should it span the full width of the parent as if the
protruding portion is not there?
In IE 7 the bottom div is reliably ignoring the red div. In Opera, Firefox and
Safari the behavior of the bottom div depends on its 'overflow' property, which
I find rather surprising. By default, the bottom div will "ignore" the red div,
just like it is in IE. But if I explicitly specify 'overflow: hidden' for the
bottom div, it beings to "bump" into the red div, refusing to span the full with
of the parent. I kind of thought that 'overflow' property is mostly intended to
control "internal" behavior of the div (i.e. inner things that are trying to
stick out), but in this case it appears to affect what I'd informally refer as
its "external" behavior.
Can anyone please shed some light on this issue? Why does 'overflow: hidden'
make the bottom div to bump into the red div in this example in the
abovementioned browsers?
The code below (and at the link provided earlier) contains two identical groups
of divs (three divs each) with the only difference of the bottom (green) div in
the second group having its 'overflow' property set to 'hidden'.
Thank you,
Andrey
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html { margin: 0; padding: 0; height: 100% }
body { margin: 0; padding: 0; height: 100%; background: silver }
div.content {
width: 70%; height: 100%; margin: 0 auto; background: white
}
div.top {
height: 50px; margin: 0; overflow: visible; background: yellow
}
div.bottom {
height: 50px; background: green
}
div.drop {
height: 90px; width: 90px; float: right; position: relative;
margin: 10px 10px 0 0; background: red
}
</style>
<head>
<body>
<div class="content">
<div class="top">
<div class="drop"></div>
</div>
<div class="bottom"></div>
<hr>
<div class="top">
<div class="drop"></div>
</div>
<div class="bottom" style="overflow:hidden"></div>
</div>
</body>
</html>