I ran into this problem before with Geck-based browsers, but could never pin point the problem until now.
You've got two DIVs. The first is floated left or right and given a width. The second is not floated, but given a left or right margin equal to the first DIV's width. This is very commonly used to get two elements to appear side-by-side with no gap in between. Add a height to both DIVs: Could be equal, could be different; sized in ems, exs, pixels, points, whatever. Things are still fine in gecko browsers.
Now add overflow: auto; to both of them... What happened to the unfloated DIV!!? But the kicker is Opera 7.2 and IE (et. all) work just fine. The code I used to create this bug is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Mozilla ****-up test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
#leftouter {
margin-right: 250px;
height: 200px;
overflow: auto;
background-color: #fcc;
}
#rightouter {
width: 250px;
height: 200px;
overflow: auto;
float: right;
background-color: #cfc;
}
-->
</style>
</head>
<body>
<div id="rightouter">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</div>
<div id="leftouter">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</div>
</body>
</html>
I've attached three screenshots each of Moz 1.6, FF 0.8, FB 0.7 and Opera 7.2. The file names should be self-explanatory.
This first ZIP file contains Mozilla 1.6 screenshots.These are the screenshots for Firebird 0.7.Screenshots for Firefox 0.8.Screenshots for Opera 7.2.Actually, I think that Gecko interprets it right.
Float is supposed to allow content of other elements flow around it. Once you add overflow: auto; the left div can no longer flow arond the floating element so Gecko adds this right margin.
I disagree with this approach to make side-by-side blocks in a first place. As I said, float allows you to put blocks that the rest of the content flows around. Since you are not using this basic feature, why use floats.
The following styling will give you more consistent results:
body
{ position: relative;
}
#leftouter {
margin-right: 250px;
overflow: auto;
height: 200px;
background-color: #fcc;
}
#rightouter {
width: 250px;
height: 200px;
overflow: auto;
position: absolute;
right: 0;
margin: 0;
background-color: #cfc;
}What you said makes sense, and it doesn't make sense. The unfloated DIV (the one on the left) is not floated, and the right one is. So the left box should be rendered under the floated box, regardless:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.
Quoted from <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html#floats">http://www.w3.org/TR/CSS2/visuren.html#floats</a><!-- m -->
The left box (unfloated) is reacting as if the floated right box is there, though the standards explicitly say all non-positioned elements would tile vertically as if the float wasn't there.
Yet, a float could potentially cover up scrollbars if floated over a block with overflow: auto - so what you said does make sense. Not sure if that's what the standards intended, but it seems to be an attempt at ensuring scroll bars are never covered up by floated elements.
I did manage to find a workaround. I just added another DIV inside the left box, gave it a height and set its overflow to auto.
You've got two DIVs. The first is floated left or right and given a width. The second is not floated, but given a left or right margin equal to the first DIV's width. This is very commonly used to get two elements to appear side-by-side with no gap in between. Add a height to both DIVs: Could be equal, could be different; sized in ems, exs, pixels, points, whatever. Things are still fine in gecko browsers.
Now add overflow: auto; to both of them... What happened to the unfloated DIV!!? But the kicker is Opera 7.2 and IE (et. all) work just fine. The code I used to create this bug is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Mozilla ****-up test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
#leftouter {
margin-right: 250px;
height: 200px;
overflow: auto;
background-color: #fcc;
}
#rightouter {
width: 250px;
height: 200px;
overflow: auto;
float: right;
background-color: #cfc;
}
-->
</style>
</head>
<body>
<div id="rightouter">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</div>
<div id="leftouter">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</div>
</body>
</html>
I've attached three screenshots each of Moz 1.6, FF 0.8, FB 0.7 and Opera 7.2. The file names should be self-explanatory.
This first ZIP file contains Mozilla 1.6 screenshots.These are the screenshots for Firebird 0.7.Screenshots for Firefox 0.8.Screenshots for Opera 7.2.Actually, I think that Gecko interprets it right.
Float is supposed to allow content of other elements flow around it. Once you add overflow: auto; the left div can no longer flow arond the floating element so Gecko adds this right margin.
I disagree with this approach to make side-by-side blocks in a first place. As I said, float allows you to put blocks that the rest of the content flows around. Since you are not using this basic feature, why use floats.
The following styling will give you more consistent results:
body
{ position: relative;
}
#leftouter {
margin-right: 250px;
overflow: auto;
height: 200px;
background-color: #fcc;
}
#rightouter {
width: 250px;
height: 200px;
overflow: auto;
position: absolute;
right: 0;
margin: 0;
background-color: #cfc;
}What you said makes sense, and it doesn't make sense. The unfloated DIV (the one on the left) is not floated, and the right one is. So the left box should be rendered under the floated box, regardless:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.
Quoted from <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html#floats">http://www.w3.org/TR/CSS2/visuren.html#floats</a><!-- m -->
The left box (unfloated) is reacting as if the floated right box is there, though the standards explicitly say all non-positioned elements would tile vertically as if the float wasn't there.
Yet, a float could potentially cover up scrollbars if floated over a block with overflow: auto - so what you said does make sense. Not sure if that's what the standards intended, but it seems to be an attempt at ensuring scroll bars are never covered up by floated elements.
I did manage to find a workaround. I just added another DIV inside the left box, gave it a height and set its overflow to auto.