Div's width is ignored - html

Question

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.
Fiddle
.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;
}
<div>
<div class="noPopup" style="z-index:101;width:800px;height:0%;top:200px;left:74px">
<div class="np1">
<div class="np2">
<div class="noPclose"></div>
<div class="np4">
<div class="btnClose" onclick="destroyLastMessage();"></div>
<div style="left:24px" class="nt1">Title</div>
<div class="nt22"></div>
<div class="ndel"></div>
<div class="n123">
<div class="n1"></div>
<div class="n3"></div>
<div class="n2"></div>
</div>
<div class="n789">
<div class="n7"></div>
<div class="n9"></div>
<div class="n8"></div>
</div>
<div class="nc">
<div style="text-align:left">
Text
<br>
<table width="100%">
<tbody>
<tr>
<td width="100%" align="right"><span onclick="remindPassword(document.getElementById('txtForgotPasswordName').value)" class="button">Button</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The issue is:
Although div's width is set to 800px, it's being ignored.
Any ideas why?

Answer 1

Please remove .noPopup .np2 { display: inline-block: }

Answer 2

You need to change the CSS of the class .noPopup .np2 to be display:block; instead of display:inline-block;
.noPopup .np2 {
display: block;
vertical-align: middle;
}
Here is the JSFiddle

Answer 3

So all this answers just say do this and don't explain anything.
the issue is you are using inline-block in child .np2 which won't have any width by default, so either:
you remove the display:inline-block (which will get it back to default display:block) and then this have width
or
you can just set some width on that .np2
Note: Don't use inline styles
.noPopup {
position: fixed;
height: 100%;
top: 0;
left: 0;
z-index: 101;
width: 800px;
/* top: 200px;*/
left: 74px
}
.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;
width: 100%
}
.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;
}
<div>
<div class="noPopup">
<div class="np1">
<div class="np2">
<div class="noPclose"></div>
<div class="np4">
<div class="btnClose" onclick="destroyLastMessage();"></div>
<div style="left:24px" class="nt1">Title</div>
<div class="nt22"></div>
<div class="ndel"></div>
<div class="n123">
<div class="n1"></div>
<div class="n3"></div>
<div class="n2"></div>
</div>
<div class="n789">
<div class="n7"></div>
<div class="n9"></div>
<div class="n8"></div>
</div>
<div class="nc">
<div style="text-align:left">
Text
<br>
<table width="100%">
<tbody>
<tr>
<td width="100%" align="right"><span onclick="remindPassword(document.getElementById('txtForgotPasswordName').value)" class="button">Button</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>