Div display:None hiding the rest of the code after it

Question

I got the following code:

  $htmlPDF = $html;

  $html .= '
      <div style="display:none;" id="conteudoHTML">' . $htmlPDF . '</div>
      <button type="button" class="button" onclick="createPDF();">pdf</button>
    <form action="pdf.php" method="post">
        <input type="hidden" name="htmlPDF" value="' . $htmlPDF . '</div>" />
      <input type="submit" class="button formularios" value="Gerar PDF" >
    </form><br /><br />
    <button id="btnGrafico" class="button formularios">Gerar Gráfico</button><br />
    <canvas class="line-chart"></canvas>
  ';

Why is it that if I do display: None in div#conteudoHTML, the rest of the código wheel?

Nor the Buttons, nor the form nor the canvas

Content of the variable $htmlDF and the CSS:

    @import url('http://fonts.googleapis.com/css?family=Open+Sans');
    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: none;
    }
    html, body {
        min-height:100%
    }
    html {
        font-family: 'Open Sans';
        font-size: 1em;
        background-image: radial-gradient(rgb(172,204,193) 20%, rgb(40, 22, 111));
        background-size: cover;
        background-repeat: no-repeat;
        box-sizing: content-box;
    }
    
    img {
        max-width: 100%;
    }
    ul {
        list-style: none;
    }
    a, a:hover {
        text-decoration: none;
    }
    select {
    	box-sizing: content-box;
    }
    
    textarea {
        border: 1px solid rgb(0,0,0);
        border-radius: 10px;
        padding: 8px;
        display: inline-block;
    }
    
    img.voltar {
    	display: block;
    	margin: 0 auto;
    }
    
    .divMensagem {
        display: block;
        width: 500px;
        margin: 0 auto;
    }
    .menu {
    	width: auto;
    	margin: 0 auto;
    	text-align: center;
    }
    .textoPrincipal, .sucesso, .erro {
    	width: 100%;
    	height: 300px;
    	line-height: 300px;
    	text-align: center;
    }
    
    .erro, .hCentralizadoAvisos {
    	color: rgb(255,0,0);
    }
    .hCentralizado, .hCentralizadoAvisos, .erro {
    	width: auto;
        line-height: 50px;
        text-align: center;
    	margin: 0 auto;
    }
    .formularios {
        margin: 0 auto !important;
    }
    .labelPequeno {
        width: 150px;
        height: 30px;
        padding: 3px;
        display: inline-block;
    }
    .labelMinimo {
    	display: inline-block;
        height: 30px;
        padding: 3px;
    	width:100px;
    }
    .labelMini {
    	display: inline-block;
        height: 30px;
        padding: 3px;
    	width:50px;
    }
    .inputTextMedio {
        border: 1px solid rgb(0,0,0);
        border-radius: 10px;
        width: 250px;
        height: 30px;
        padding: 3px;
        display: inline-block;
    }
    
    .button {
        width: 250px;
        height: 30px;
        margin: 3px;
    }
    .btnAcesso, .btnPesquisa {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        width: 208px;
        height: 44px;
    }
    .btnAcesso {
        background-image: url(../../_imgs/acesso.png);
    }
    .btnPesquisa {
        background-image: url(../../_imgs/pesquisar.png);
    }
    .modelos {
        color: red;
    }
    .todo {
        background-color: rgb(255,255,255);
        margin: 0 auto;
        width: 1000px;
    }
    .topo, .cont, .final {
        display: block;
    }
    .cont {
    	min-height: calc(100vh - 120px);
    }
    .final {
    	position: relative;
    	margin-bottom: 0;
        background-color: #000;
        color: #FFF;
    }
    .finalEsquerda, .finalDireita {
        display: inline-block;
        vertical-align: middle;
    }
    .finalEsquerda {
        width: 78%;
        margin-left: 0;
        text-align: left;
    }
    .finalDireita {
        width: 20%;
        margin-right: 0;
        text-align: right;
    }
    
    /*///////////////////////// INICIO LISTAGENS ///////////////*/
    div.lista {
        margin: auto;
    }
    ul.listaTopo, ul.listaRegistros, ul.listaFuncoes, ul.menuItens {
        width: auto;
        margin: 0 auto;
        text-align: center;
    }
    ul.listaTopo {
    	background-color: rgb(217,217,217);
        color: rgb(255,255,255);
    }
    ul.listaTopo li, ul.listaRegistros li, ul.listaFuncoes li {
        display: inline-block;
        height: 50px;
        line-height: 25px;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
    }
    ul.menuItens li {
        width: 22%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        margin: 10px;
    }
    /*///////////////////////// FIM LISTAGENS /////////////////*/
    
    div.relatorio {
        width: 95%;
        margin: 0 auto;
    }
    div.relatorio .centralizado {
        text-align: center !important;
    }
    div.relatorio .backCinza {
        background-color: rgb(217,217,217);
    }
    div.relatorio ul.detalhes {
        display: block;
        width: 100%;
        height: auto;
        text-align: left;
        margin: 0 auto;
    }
    div.relatorio ul.lancamento li, div.relatorio ul.resumo li {
        height: 100%;
        line-height: 18px;
        font-size: .85em;
        border-left: .1px rgb(0,0,0) solid;
        text-align: center;
        vertical-align: middle;
    }
    div.relatorio ul.lancamento li {
        width: 113.5px !important;
    }
    div.relatorio ul.resumo li {
        width: 150px !important;
    }
    div.relatorio ul.lancamento li:first-child, div.relatorio ul.resumo li:first-child {
        border-left: none;
    }
    div.relatorio ul.ulInlineBlock li {
        display: inline-block;
    }
    div.relatorio ul.border {
        border: .1px rgb(0,0,0) solid;
    }
    span.vertical {
    	-webkit-writing-mode: vertical-lr;
    	    -ms-writing-mode: tb-lr;
    	        writing-mode: vertical-lr;
    	-webkit-transform: rotate(180deg);
    	    -ms-transform: rotate(180deg);
    	        transform: rotate(180deg);
    }
    span.comum {		
    
    }
    div.cabecalhoVertical{
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
        margin: 0 auto;
    	width: 800px;
    	height: 220px;
    	border: .1px rgb(0,0,0) solid;
    
    }
    div.cabecalhoVertical div {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	border-right: .1px rgb(0,0,0) solid;
    	-webkit-box-align: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    	-webkit-box-pack: center;
    	    -ms-flex-pack: center;
    	        justify-content: center;
    }
    div.cabecalhoVertical div span {
    	text-align: center;
    	font-weight: bolder;
    }

<div class='relatorio'>	
<img src='http://www.wesleyanagceu.com.br/_imgs/gceu.png' /> <h1>Relatório Mensal</h1>	
<br><br>		
<div class='cabecalhoVertical'>
	<div style='width:100px;'><span class='comum'   >Nome do Gcéu</span></div>
	<div style='width:100px;'><span class='vertical'>Supervisor</span></div>
	<div style='width:100px;'><span class='comum'   >Líder</span></div>
	<div style='width:050px;'><span class='vertical'>Houve Supervisão</span></div>
	<div style='width:050px;'><span class='vertical'>Houve dia de Jejum</span></div>
	<div style='width:050px;'><span class='vertical'>Houve dia de Evangelismo</span></div>
	<div style='width:050px;'><span class='vertical'>Membros Compromissados</span></div>
	<div style='width:050px;'><span class='vertical'>Visitantes</span></div>
	<div style='width:050px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div>
	<div style='width:050px;'><span class='vertical'>Total de presentes</span></div>
	<div style='width:050px;'><span class='vertical'>Ofertas</span></div>					
	<div style='width:050px;'><span class='vertical'>Disicpulados</span></div>					
	<div style='width:050px;'><span class='vertical'>Número de decisões</span></div>					
</div>	
<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
	<div style='width:100px;'><span class='comum'>Célula 1</span></div>
	<div style='width:100px;'><span class='comum'>Cleonice</span></div>
	<div style='width:100px;'><span class='comum'>Jonas</span></div>
	<div style='width:050px;'><span class='comum'>Não</span></div>
	<div style='width:050px;'><span class='comum'>Não</span></div>
	<div style='width:050px;'><span class='comum'>Não</span></div>
	<div style='width:050px;'><span class='comum'>50</span></div>
	<div style='width:050px;'><span class='comum'>10</span></div>
	<div style='width:050px;'><span class='comum'>13</span></div>
	<div style='width:050px;'><span class='comum'>73</span></div>
	<div style='width:050px;'><span class='comum'>22,65</span></div>					
	<div style='width:050px;'><span class='comum'>2</span></div>					
	<div style='width:050px;'><span class='comum'>11</span></div>
</div>			 
<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
	<div style='width:100px;'><span class='comum'>Celula 2</span></div>
	<div style='width:100px;'><span class='comum'>Carlos</span></div>
	<div style='width:100px;'><span class='comum'>Jonas</span></div>
	<div style='width:050px;'><span class='comum'>Não</span></div>
	<div style='width:050px;'><span class='comum'>Não</span></div>
	<div style='width:050px;'><span class='comum'>Não</span></div>
	<div style='width:050px;'><span class='comum'>10</span></div>
	<div style='width:050px;'><span class='comum'>5</span></div>
	<div style='width:050px;'><span class='comum'>3</span></div>
	<div style='width:050px;'><span class='comum'>18</span></div>
	<div style='width:050px;'><span class='comum'>78,39</span></div>					
	<div style='width:050px;'><span class='comum'>3</span></div>					
	<div style='width:050px;'><span class='comum'>1</span></div>
</div>			 
<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
	<div style='width:100px;'><span class='comum'>Celula TOP</span></div>
	<div style='width:100px;'><span class='comum'>Carlos</span></div>
	<div style='width:100px;'><span class='comum'>Carlos</span></div>
	<div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
</div>			 
<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
	<div style='width:100px;'><span class='comum'>Jesuita</span></div>
	<div style='width:100px;'><span class='comum'>Josefina Etelvina</span></div>
	<div style='width:100px;'><span class='comum'>Josefina Etelvina</span></div>
	<div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
</div>			 
<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
	<div style='width:100px;'><span class='comum'>Tassito</span></div>
	<div style='width:100px;'><span class='comum'>Carlos</span></div>
	<div style='width:100px;'><span class='comum'>Carlos</span></div>
	<div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
</div>
</div>

https://jsfiddle.net/wv2jnydp/

Answer 1

When using the display: none you cause the element (your div) not to be rendered, only included in the DOM. It is an explicit attribute indicating "this does not need to appear on the screen".

According to the documentation:

The CSS display property specifies the type of render box used by an element. In HTML, the default values of the display property are made from the behavior described in the HTML specification or the default browser/user style sheet. The default XML value is inline.

In addition to the many different types of box display, the None value allows you to disable the display of an element; when you use None, all descending elements also have their display disabled. The document is rendered as if the element did not exist in the document tree.