CSSの表記が特定の場合のみ崩れる

Question

前提・実現したいこと

PHPで作成中のページに下記読込み画面を実装したところページが崩れてしまいました。
おそらくは自身のCSSに問題がある為かと思うのですが問題の切り分けをしたく思います。
下記コードもしくはタグに記載したCSSに何か問題はあるでしょうか？

発生している問題・エラーメッセージ

CSSが崩れてしまう

該当のソースコード

function Loadwaite(){
$gonext = <<<eot
 
<div id="loadendbg" style='
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #000;
    z-index: 1;
'>
<div id="loadend" style='
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    text-align: center;
    color: #fff;
    z-index: 2;
'>
<img src="./img/img-loading.gif" width="80" height="80" alt="Now Loading..." />
<p>Now Loading...</p>
</div></div>

eot;
//--ロード処理
    //ブラウザでバッファーリングされて直ぐに表示されない時は空白などを出力する
    header('Content-Type: text/html; charset=UTF-8');
    echo str_pad(" ",4096);
    ob_end_flush();
    ob_start('mb_output_handler');
    echo $gonext;
    ob_flush();
    flush();
}

読み込んだ後ページのヘッダー部分

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
<div id="loadendbg" style='
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: #000;
z-index: 1;
'>
<div id="loadend" style='
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
text-align: center;
color: #fff;
z-index: 2;
'>
<img src="./img/img-loading.gif" width="80" height="80" alt="Now Loading..." />
<p>Now Loading...</p>
</div></div>
<!doctype html>
<html lang="ja" dir="ltr">
<head>
<meta charset="UTF-8">
<title>My Site Top</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Cover of the content">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<script>
var element1 = document.getElementById('loadend'); 
var element2 = document.getElementById('loadendbg'); 
element1.remove();
element2.remove();
</script>
<body>

試したこと

適当な個人ページのソースを頂戴してヘッダ部分を張り付けて表示しますと
ページが崩れる場合と、そうでない場合があるのでCSSの問題かと思い質問しています。

Comments

[maisumakun]

「崩れる」とありますが、「どう出そうとした」ものが「実際にはどのようになっている」のでしょうか？

[can1980]

主にDIVタグがおかしくなっているようです。％指定や無指定のwidth,heightが普段よりも大きくなっているように思います。

[recal]

id="loadendbg"たちは<body>タグの中にはないんでしょうか？
それとも記述ミスですか？

>読み込んだ後ページのヘッダー部分
body開始タグしかありません。

><link rel="stylesheet" href="css/stylesheet.css">
外部リンク先が提示されてないのでcssのチェックも出来ません。

[can1980]

HTMLタグの外にあるのでCSS表示にエラーが起こるような問題があるのか自分では調べられませんでしたので質問させていただきました。phpでの長い読込み処理中にローディングを表示しておき、ローディングが終わればJavaScriptなどの処理がされid="loadendbg"を消す処理が動いて無事消えてくれるかと思っていました。

[m.ts10806]

がめんキャプチャ提示されたほうが良いと思います。
・目指している画面イメージ
・現状