CODEWITHSUNDEEP
cssdombackground
kenitech
kenitech

Reputation: 1163

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

Upvotes: 4

Views: 5985

Answers (2)

Daniel
Daniel

Reputation: 31

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,..)

Upvotes: 3

Moin Zaman
Moin Zaman

Reputation: 25455

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>

Upvotes: 1

Related Questions