Home/ Questions/Q 4001098
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:51:47+00:00

I have a html snippet below which renders perfectly in all browsers. However in

  • 0

I have a html snippet below which renders perfectly in all browsers. However in webkit on an iphone and ipad, when I pinch the page (so that its smaller), I see a black border which is the background color of the body shining through only on the right edge. This only happens when I specifiy the width of the .headerpic div. Since this is the only place in the document I specify the width, I was wondering why it stops short of rendering all the way to the right edge (since this is theoretically the widest part of the document?).

I’ve attached a photo of what it looks like from my ipad.

<!doctype html>
<html>

   <head>

    <style>
      body {background-color:#000;color:#231f20;margin:0;}
      #wrapper {background-color:#fff;min-height:1000px;}
      #header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;}
      #footer {color:#fff;}
    </style>
  </head>

  <body>

    <div id="wrapper">
      <div id="header">
        <div class="headerpic">
        </div>
      </div>
    </div>

    <div id="footer">
    </div>

  </body>
</html>

Photo Of problem

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It will illustrate your problem a little bit clear: http://jsbin.com/ilenu5/5

    What I did:

    1. I Increased the width of the
      #headerpic to 1286px
    2. I added a
      background color of #headerpic,
      which is red

    So the your actual problem is: overflow occured

    Why?
    because you don’t set your viewport (width=device-width) and the minimum physical width (in px or cm or em) of body, so your body width by default is 980px, and inherited by #wrapper— so your 986px #headerpic overflows the #wrapper, and makes your black background appear. Since the overflowed area width is small (986-980=6px), you see a black line.

    • 0