I created a simple example to illustrate the issue I am having.
It seems that if I have a DIV set to a specific pixel width, then resize the browser smaller until the horizontal scroll bar appears then scroll to the right, the content is cut off. Or at least some of it.
http://www.artworknotavailable.com/examples/cutoff.html
Am I missing s something here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browser Cutoff Example</title>
</head>
<body>
<div>
<div style="background-color:#009900;">
<div style="width:800px;">
<strong>Width: 800px </strong>
<br />
Resize your browser Smaller than the width of this box until Horizontal scroll bars appear
<br />
Now scroll to the right.
<br />
Why is the box getting cut off?
</div>
</div>
</div>
</body>
</html>
You have 3 nested divs. one is not styled. the next one in has the background color. and he deepest one has the 800px width.
try this and you'll see whats happening: