title: Div's width is ignored
body: <p>I've tried re-using some method showing custom alert on a web page. For some reason the code works properly on old pages but not on my new one.</p>
  
  <p><a href="https://jsfiddle.net/2zgx0668/8/" rel="nofollow">Fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.noPopup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .noPopup .np1 {
    text-align: center;
    height: 100%;
  }
  .noPopup .np1:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }
  .noPopup .np2 {
    display: inline-block;
    vertical-align: middle;
  }
  .noPopup .np4 {
    position: relative;
  }
  .noPopup .noPclose {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .noPopup .nt1 {
    position: absolute;
    left: 40px;
    top: 25px;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    color: white;
  }
  .noPopup .nt2 {
    position: absolute;
    left: 110px;
    top: 23px;
    font-family: Calibri;
    font-size: 18px;
    color: white;
  }
  .noPopup .nt22 {
    position: absolute;
    left: 25px;
    top: 23px;
    font-family: Calibri;
    font-size: 18px;
    color: white;
  }
  .noPopup .ndel {
    display: none;
    position: absolute;
    left: 95px;
    top: 20px;
    background-color: #9f7709;
    width: 2px;
    height: 25px;
  }
  .noPopup .ndel2 {
    position: absolute;
    left: 95px;
    top: 20px;
    background-color: #9f7709;
    width: 2px;
    height: 25px;
  }
  .noPopup .btnl {
    background-image: url('../Images/noPopup/btnl.png');
    position: absolute;
    top: 21px;
    right: 120px;
    width: 8px;
    height: 21px;
    cursor: pointer;
  }
  .noPopup .btnr {
    background-image: url('../Images/noPopup/btnr.png');
    position: absolute;
    top: 21px;
    right: 80px;
    width: 8px;
    height: 21px;
    cursor: pointer;
  }
  .noPopup .btnClose {
    background-image: url('../Images/noPopup/btnClose.png');
    position: absolute;
    top: 15px;
    right: 20px;
    width: 36px;
    height: 36px;
    cursor: pointer;
  }
  .noPopup .n123 {
    position: absolute;
    top: -2px;
    width: 100%;
  }
  .noPopup .n789 {
    position: absolute;
    bottom: -2px;
    width: 100%;
  }
  .noPopup .nc2 {
    background-color: #1c1c1c;
    border: solid 1px #9f7709;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }
  .noPopup .nc22 {
    background-color: #1c1c1c;
    border: solid 1px #9f7709;
    /*display: table-cell;
                vertical-align: middle;*/
  }
  .noPopup .nc23 {
    padding: 2px;
    display: table-cell;
    vertical-align: middle;
  }
  .noPopup .nc2if {
    background-color: #1c1c1c;
    border: solid 1px #9f7709;
    max-height: 100%;
    max-width: 100%;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
  }
  .noPopup .nc2im {
    max-height: 100%;
    max-width: 100%;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
  }
  .noPopup .nc {
    color: white;
    margin: 2px 3px 2px 3px;
    background-color: #222222;
    padding: 60px 20px 20px 20px;
    background-image: url('../Images/noPopup/gex.png');
    background-repeat: no-repeat;
    background-position: left -60px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }
  .noPopup .n1 {
    width: 8px;
    height: 8px;
    background-image: url('../Images/noPopup/1.png');
    float: left;
  }
  .noPopup .n2 {
    margin-left: 8px;
    margin-right: 8px;
    height: 8px;
    background-image: url('../Images/noPopup/2.png');
    background-repeat: repeat-x;
    background-position: center 2px;
  }
  .noPopup .n3 {
    width: 8px;
    height: 8px;
    background-image: url('../Images/noPopup/3.png');
    float: right;
  }
  .noPopup .n7 {
    width: 8px;
    height: 8px;
    background-image: url('../Images/noPopup/7.png');
    float: left;
  }
  .noPopup .n8 {
    height: 8px;
    margin-left: 8px;
    margin-right: 8px;
    background-position: bottom;
    background-image: url('../Images/noPopup/8.png');
    background-repeat: repeat-x;
  }
  .noPopup .n9 {
    width: 8px;
    height: 8px;
    background-image: url('../Images/noPopup/9.png');
    float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div class="noPopup" style="z-index:101;width:800px;height:0%;top:200px;left:74px"&gt;
      &lt;div class="np1"&gt;
        &lt;div class="np2"&gt;
          &lt;div class="noPclose"&gt;&lt;/div&gt;
          &lt;div class="np4"&gt;
            &lt;div class="btnClose" onclick="destroyLastMessage();"&gt;&lt;/div&gt;
            &lt;div style="left:24px" class="nt1"&gt;Title&lt;/div&gt;
            &lt;div class="nt22"&gt;&lt;/div&gt;
            &lt;div class="ndel"&gt;&lt;/div&gt;
            &lt;div class="n123"&gt;
              &lt;div class="n1"&gt;&lt;/div&gt;
              &lt;div class="n3"&gt;&lt;/div&gt;
              &lt;div class="n2"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="n789"&gt;
              &lt;div class="n7"&gt;&lt;/div&gt;
              &lt;div class="n9"&gt;&lt;/div&gt;
              &lt;div class="n8"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="nc"&gt;
              &lt;div style="text-align:left"&gt;
                Text
                &lt;br&gt;
                &lt;table width="100%"&gt;
                  &lt;tbody&gt;
                    &lt;tr&gt;
                      &lt;td width="100%" align="right"&gt;&lt;span onclick="remindPassword(document.getElementById('txtForgotPasswordName').value)" class="button"&gt;Button&lt;/span&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
                &lt;/table&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The issue is:</p>
  
  <p>Although <code>div</code>'s <code>width</code> is set to 800px, it's being ignored.</p>
  
  <p>Any ideas why?</p>