title: HTML divs can go outside browser window?
body: <p>I was playing around with ASP.NET Web Parts which has a "drop down" div.  It's all the way to the right of the page.  When I click to bring it up, it goes off the window.  Usually anything off the viewable area will trigger the bottom scrollbars.  How is this possible?  </p>
  
  <p><a href="https://i.stack.imgur.com/gPLAK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gPLAK.png" alt="alt text"></a>
  </p>
  
  <p><strong>Edit:</strong> It's Internet Explorer 8.  Below is the markup with some context.  The relevant one I think is id=WebPart_wp774658725VerbsMenu.  By default it doesn't display.  When you click on the td/span Verbs/span VerbsPopup (it could be any), it shows the "dropdown".  In Developer Tools I don't see any JavaScript attached to those elements, but if I debug it I see it running some.</p>
  
  <pre><code>&lt;TD class=partTitle&gt;
    &lt;TABLE style="WIDTH: 100%" border=0 cellSpacing=0 cellPadding=0&gt;
      &lt;TBODY&gt;
        &lt;TR&gt;
          &lt;TD style="WIDTH: 100%; WHITE-SPACE: nowrap; CURSOR: move" id=WebPartTitle_wp774658725&gt;&lt;SPAN title="Billing Information"&gt;Billing Information&lt;/SPAN&gt;&amp;nbsp;&lt;/TD&gt;
          &lt;TD style="WHITE-SPACE: nowrap"&gt;
            &lt;SPAN style="PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: inline-block; COLOR: white; CURSOR: hand; TEXT-DECORATION: none; PADDING-TOP: 1px" id=WebPart_wp774658725Verbs&gt;
              &lt;SPAN style="FONT-FAMILY: Marlett; FONT-SIZE: 8pt" id=WebPart_wp774658725VerbsPopup&gt;u&lt;/SPAN&gt;
            &lt;/SPAN&gt;
            &lt;DIV style="DISPLAY: none" id=WebPart_wp774658725VerbsMenu&gt;
              &lt;TABLE style="BORDER-BOTTOM: white 1px solid; BORDER-LEFT: white 1px solid; BACKGROUND-COLOR: maroon; WIDTH: 100%; BORDER-COLLAPSE: collapse; FONT-FAMILY: Arial; FONT-SIZE: 0.8em; BORDER-TOP: white 1px solid; BORDER-RIGHT: white 1px solid" cellSpacing=0 cellPadding=1&gt;
                &lt;TBODY&gt;
                  &lt;TR&gt;
                    &lt;TD style="WHITE-SPACE: nowrap"&gt;
                      &lt;DIV&gt;
                        &lt;A class=menuItem title="Deletes 'Billing Information'" onclick="if(document.body.__wpmDeleteWarning.length == 0 || confirm(document.body.__wpmDeleteWarning)){document.body.__wpm.SubmitPage('WebFormDisplay1$MainPageWPZ', 'delete:wp774658725');}" href="javascript:void(0)"&gt;
                          &lt;IMG style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; VERTICAL-ALIGN: middle; BORDER-LEFT-STYLE: none" alt="Deletes 'Billing Information'" src="/WebResource.axd?d=5L7XWTaglMPmXRe6NJDkRg2&amp;amp;t=633802513995006876" width=16 height=16&gt;&amp;nbsp;Delete&amp;nbsp;
                        &lt;/A&gt;
                      &lt;/DIV&gt;
                    &lt;/TD&gt;
                  &lt;/TR&gt;
                &lt;/TBODY&gt;
              &lt;/TABLE&gt;
            &lt;/DIV&gt;
          &lt;/TD&gt;
        &lt;/TR&gt;
      &lt;/TBODY&gt;
    &lt;/TABLE&gt;
  &lt;/TD&gt;
  
  
  WebParts.js
      function WebPartMenu_OnClick() {
      var a = window.event.srcElement.__menu;
      if (typeof a != "undefined" &amp;&amp; a != null) {
          cancelEvent(window.event);
          a.Show()
      }
  }
  
  function WebPartMenu_Show() {
      if (typeof __wpm.menu != "undefined" &amp;&amp; __wpm.menu != null) __wpm.menu.Hide();
      var e = "&lt;html&gt;&lt;head&gt;&lt;style&gt;" + "a.menuItem, a.menuItem:Link { display: block; padding: 1px; text-decoration: none; " + this.itemStyle + " }" + "a.menuItem:Hover { " + this.itemHoverStyle + " }" + '&lt;/style&gt;&lt;body scroll="no" style="border: none; margin: 0; padding: 0;" ondragstart="window.event.returnValue=false;" onclick="popup.hide()"&gt;' + this.menuElement.innerHTML + "&lt;body&gt;&lt;/html&gt;",
      b = 16,
      c = 16;
      this.popup = window.createPopup();
      __wpm.menu = this;
      var d = this.popup.document;
      d.write(e);
      this.popup.show(0, 0, b, c);
      var a = d.body;
      b = a.scrollWidth;
      c = a.scrollHeight;
      if (b &lt; this.menuLabelElement.offsetWidth) b = this.menuLabelElement.offsetWidth + 16;
      if (this.menuElement.innerHTML.indexOf("progid:DXImageTransform.Microsoft.Shadow") != -1) a.style.paddingRight = "4px";
      a.__wpm = __wpm;
      a.__wpmDeleteWarning = __wpmDeleteWarning;
      a.__wpmCloseProviderWarning = __wpmCloseProviderWarning;
      a.popup = this.popup;
      this.popup.hide();
      this.popup.show(0, this.menuLabelElement.offsetHeight, b, c, this.menuLabelElement)
  }
  </code></pre>