Alignment of div’s on the right

Asked

Viewed 115 times

1

I am unable to align the div’s right into my mpdf report. Below contains the report print and code.

inserir a descrição da imagem aqui

Below the code:

 </head>
    <style type='text/css'>
    .dados_principais {
            border: 1px solid black;
            border-top: 1px solid black;
            border-radius: 0.5em;
            margin-left: -1px;
            margin-right: -1px;
            margin-top: -1px;


           }
    </style>

    </head>
    <body>

    <div>

                <div class='dados_principais' style='text-align: center;margin-top: 4px;border: 1px solid red;background-color:#dcdcdc;'> 
                    <b><span style='font-style: italic; font-family: arial;'>
                        Teste de robos</span>
                        </b>
                    <div>
                    <div class='dados_principais' style='text-align: left;width:17%; margin-top: -1px;float:left;background-color:#ffffff; '>
                        <div style='padding-left:3px; float:left; font-size: 9px;  '>1º Data</div>
                        <div style='padding-left:3px;'>
                        <span >". $data_inicio_ensaio ."<span>
                        </div>
                    </div>  

                    <div class='dados_principais' style='width:41%; margin-top: 0px;float:left;background-color:#ffffff;'>
                        <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
                        <span style='visibility:hidden;' >.<span>


                    <div class='dados_principais' style='border: 1px solid black;width:41.50%; margin-top: 0px;float:left;background-color:#ffffff;'>
                        <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
                        <span style='visibility:hidden;'>.<span>
                    </div>  

                    </div>




<div style='width:100%;text-align: left; margin-top: -1px;border: 1px solid blue;'>
                <div class='dados_principais' style='border: 1px solid black;width:17%; margin-top: -1px;float:left;background-color:#ffffff; '>
                    <div style='padding-left:3px; float:left; font-size: 9px;  '>2º Data</div>
                    <span >". $data_inicio_ensaio2 ."<span>
                     </div>


                <div class='dados_principais' style='width:39%; margin-top: 0px;float:left;background-color:#ffffff;'>
                <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura</div>
                <span style='visibility:hidden;' >.<span>
            </div>  

                <div class='dados_principais' style='border: 1px solid black;width:39%; margin-top: 0px;float:left;background-color:#ffffff;'>
                <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
                <span style='visibility:hidden;'>.<span>
            </div>  
            </div>

I need the Divs (the two signature fields) that are next to the "1st Date" field, to be next to the Divs that are on the second line "2nd Date"

html div mpdf

1 answer

1


Paul his code had a series of open tags, had div closed in the wrong place etc...

Follow your code with the fix, I just closed the tags in the right places, and I basically organized the code.

Look how it turned out:

OBS: Here in the Stackoverflow snippet it gets half broken because the box width is small. But have it display in "Whole page" to see how it looks better. Or else you’ll have to use the @media to treat your form on small screens.

.dados_principais {
    border: 1px solid black;
    border-top: 1px solid black;
    border-radius: 0.5em;
    margin-left: -1px;
    margin-right: -1px;
    margin-top: -1px;
}
<div class='dados_principais' style='text-align: center;margin-top: 4px;border: 1px solid red;background-color:#dcdcdc;'>
    <b>
        <span style='font-style: italic; font-family: arial;'>Teste de robos</span>
    </b>
    <div style='width:100%;text-align: left;'>
        <div class='dados_principais' style='text-align: left;width:17%; margin-top: -1px;float:left;background-color:#ffffff; '>
            <div style='padding-left:3px; float:left; font-size: 9px;  '>1º Data</div>
            <div style='padding-left:3px;'>
                <span>". $data_inicio_ensaio ."</span>
            </div>
        </div>

        <div class='dados_principais' style='width:41%; margin-top: 0px;float:left;background-color:#ffffff;'>
            <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
            <span style='visibility:hidden;'>.</span>
        </div>

        <div class='dados_principais' style='border: 1px solid black;width:41.50%; margin-top: 0px;float:left;background-color:#ffffff;'>
            <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
            <span style='visibility:hidden;'>.</span>
        </div>
    </div>

    <div style='width:100%;text-align: left; margin-top: -1px;border: 1px solid blue;'>
        <div class='dados_principais' style='border: 1px solid black;width:17%; margin-top: -1px;float:left;background-color:#ffffff; '>
            <div style='padding-left:3px; float:left; font-size: 9px;  '>2º Data</div>
            <div style='padding-left:3px;'>
                <span>". $data_inicio_ensaio2 ."</span>
            </div>
        </div>


        <div class='dados_principais' style='width:39%; margin-top: 0px;float:left;background-color:#ffffff;'>
            <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura</div>
            <div style='padding-left:3px;'>
                <span style='visibility:hidden;'>.</span>
            </div>
        </div>

        <div class='dados_principais' style='border: 1px solid black;width:39%; margin-top: 0px;float:left;background-color:#ffffff;'>
            <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
            <div style='padding-left:3px;'>
                <span style='visibility:hidden;'>.</span>
            </div>
        </div>
    </div>
 </div>

  • 1

    Thanks buddy, that’s right, problems with opening and closing tag.

  • @I’m glad it worked out! If my answer helped you in any way consider marking it as Accept, in this icon below the arrows on the left side of my answer :) so the site does not get open questions pending without response accepted.

  • True!! It’s marked. Thank you

Browser other questions tagged html div mpdf

You are not signed in. Login or sign up in order to post.