Brower Scroll cuts off content

views:

answers:

Brower Scroll cuts off content

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"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <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:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;


<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Browser Cutoff Example</title>
</head><body>

<div>
    <div style="background-color: rgb(0, 153, 0); border: 9px solid blue;">
    <div style="width: 800px; border: 1px solid red;">
        <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>

Moin Zaman 2010-10-08 23:10:28

Hi Moin, Thanks for clarifying the issue. That portion makes a bit of sense although I thought the expected behavior would be that the outer DIV with the background would continue to wrap around. Putting "width:100%" on the outer DIV proves to be ineffective as well.

kenitech 2010-10-12 15:09:55

ansaurus

tags:

views:

answers:

Brower Scroll cuts off content

related questions