Div's width is ignored

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

请删除.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>