2

I have the following html/css that is causing problems in Firefox 1.5 and 2, but is working correctly in IE6/7/8, Safari, Chrome, Opera and Firefox 1 and 3.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Firefox Bug</title>
<style type="text/css">
  * { border: 0; padding: 0; margin: 0; }
  #wrapper {
    width: 500px;
    min-height: 550px;
    height: auto !important;
    height: 550px;
    border: 5px solid blue;
    position: relative;
    display: inline;
    overflow: auto;
    float: left;
  }
  #content {
    border: 5px solid green;
  }
  #bottom {
    border: 5px solid red;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 100px;
  }
</style>
</head>
<body>
  <div id="wrapper">
    <div id="content">
      Foo
    </div>
    <div id="bottom">
      Bar
    </div>
  </div>
</body>
</html>

In the browsers that are working correctly, the bottom element shows up on the bottom right of the wrapper element. However, in Firefox 2, the bottom element is at the bottom of the content element. I cannot figure out why this is happening, any help would be greatly appreciated.

Expected Results

Expected Results

Firefox 2 Bug

Firefox Bug

Community
  • 1
  • 1
Buddy
  • 6,603
  • 1
  • 21
  • 16

3 Answers3

1

I was able to find a workaround, but I still don't understand what is going wrong. My workaround is not a silver bullet, but it will work for my situation.

Removing the min-height work around for IE seems to make it do the right thing. The problem with this solution is that if the content element is larger then the height, scroll bars would appear for the overflowing content.

#wrapper {
  width: 500px;
  height: 550px;
  border: 5px solid blue;
  position: relative;
  display: inline;
  overflow: auto;
  float: left;
}
Buddy
  • 6,603
  • 1
  • 21
  • 16
  • The problem still exists in later versions of Firefox. I'm using v41 on Ubuntu 14.04 and the only way I could get the DIV to move to the bottom was to take the container and stick a float on it. Luckily, it was a right column, anyway, so I just added "float:right" and miraculously the problem was fixed. Very strange indeed. Shame on FF for being so strange compared to the other browsers, even after a normalize.css is used. – Volomike Apr 21 '16 at 06:22
0

Either take off the

 float: left.

Or try changing

 bottom: 0

to

 top: 100%;
Dmitri Farkov
  • 9,133
  • 1
  • 29
  • 45
0

Remove the overflow:auto from #wrapper.

Mixing floats and absolute positioning is notoriously hard to get right for all browsers -- they each seem to implement their own little quirks.

Emily
  • 9,926
  • 4
  • 31
  • 39