Google Chrome moves div out of document flow when using internal links

Look at the two links below in Chrome:

Working: http://www.datesphere.com/boards/showthread.php?tid=46

Broken: http://www.datesphere.com/boards/showthread.php?tid=46&pid=345#pid345

Notice how the navigation breadcrumb and "thread rating" section render correctly in the "working" link, but are jammed up under the user panel in the "broken" link. I've spent a lot of time trying to figure out why this is happening (asked on mybb.com and a couple other forums, reported a bug to Google Chrome team, etc.) but haven't had any luck, so am hoping Stackoverflow comes through once again.

Here's what I know:

• This only happens in Google Chrome, and as far 开发者_开发问答as I can tell only on permalinked posts where you have an internal link -- pages ending with "pid=[number]#pid[number]"
• I believe it's happening because the "wrapper" div that starts the content section is being rendered up at the same place as the user panel instead of below it, where it belongs in the document flow.
• Adding a clearing div ("style=clear:both;") before the "content" div fixes the problem in Chrome Developer Tools, but when you add it to the actual code nothing happens.

This is the most baffling and frustrating thing I've come across in html / css. Does anyone have any idea why this is happening, and how I might fix it?

Thanks,

Chris

Here's your culprit.

#content {
  overflow: hidden;
}

This is exactly the reason why you shouldn't use overflow hidden for clearing floats. Anchor links will cause overflowed elements to scroll in certain situations. Look into clearfix for clearing floats instead.

Run this javascript in your console for a demonstration on the problem:

document.getElementById("content").scrollTop = 0