codefactor/ie9_problem.html

## ie9_problem.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
#scroller{
  overflow: auto;
  width:500px;

  /*
    Remove height:100% and you get some weird behavior in IE9.
    The initial scroll stops, but second scrolling attempt works
    but the scroller div keeps growing vertically any time you
    scroll horizontally.

    Keep it, and the horizonal scroll is basically useless.
    Clicking the handle only scrolls one pixel, clicking the
    arrow buttons will only allow one scroll (continuous scroll
    is not working). Clicking the trough (or track) seems
    unaffected
  */
  height:100%
}
#content{
  width:600px;
}
#buttonBar{
  position: relative;
}
#buttonArea{
  float: right;
}
</style>

<script>
function onScroll(scroller, event) {
  var buttonBar = document.getElementById('buttonBar');
  buttonBar.style.left = scroller.scrollLeft + 'px';
}
</script>
</head>
<body>

<div id="scroller" onscroll="onScroll(this,event)">

  <div id="content">Scrolling Content</div>
  <div id="buttonBar">
    <div id="buttonArea">
      Right Aligned
    </div>
  </div>

</div>

</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

	<style>
	#scroller{
	overflow: auto;
	width:500px;

	/*
	Remove height:100% and you get some weird behavior in IE9.
	The initial scroll stops, but second scrolling attempt works
	but the scroller div keeps growing vertically any time you
	scroll horizontally.

	Keep it, and the horizonal scroll is basically useless.
	Clicking the handle only scrolls one pixel, clicking the
	arrow buttons will only allow one scroll (continuous scroll
	is not working). Clicking the trough (or track) seems
	unaffected
	*/
	height:100%
	}
	#content{
	width:600px;
	}
	#buttonBar{
	position: relative;
	}
	#buttonArea{
	float: right;
	}
	</style>

	<script>
	function onScroll(scroller, event) {
	var buttonBar = document.getElementById('buttonBar');
	buttonBar.style.left = scroller.scrollLeft + 'px';
	}
	</script>
	</head>
	<body>

	<div id="scroller" onscroll="onScroll(this,event)">

	<div id="content">Scrolling Content</div>
	<div id="buttonBar">
	<div id="buttonArea">
	Right Aligned
	</div>
	</div>

	</div>

	</body>
	</html>