Browser Scroll cuts off content

Question

Browser Scroll cuts off content

5.7k views Asked by kenitech At 08 October 2010 at 22:17

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>

Original Q&A

There are 2 answers

Daniel On 28 September 2012 at 20:56

This issue drove me crazy too, and it's actutally really simple to solve. Just add the property min-width and put the same value as your site width (800px, 960px,..)

**Moin Zaman** · Accepted Answer · 2010-10-08 23:10:28

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"><head>


<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>

TechQA.

Browser Scroll cuts off content

There are 2 answers

Related Questions in CSS

Related Questions in DOM

Related Questions in BACKGROUND

Popular Questions

Popular Tags

Trending Questions