Right div alignment

1

I'm not able to align the div's right in my mpdf report. Below is the print of the report and the code.

Belowthecode:

</head><styletype='text/css'>.dados_principais{border:1pxsolidblack;border-top:1pxsolidblack;border-radius:0.5em;margin-left:-1px;margin-right:-1px;margin-top:-1px;}</style></head><body><div><divclass='dados_principais'style='text-align:center;margin-top:4px;border:1pxsolidred;background-color:#dcdcdc;'><b><spanstyle='font-style:italic;font-family:arial;'>Testederobos</span></b><div><divclass='dados_principais'style='text-align:left;width:17%;margin-top:-1px;float:left;background-color:#ffffff;'><divstyle='padding-left:3px;float:left;font-size:9px;'>1ºData</div><divstyle='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) next to the "1st Date" field, to be next to the divs that are in the second "2nd Date" line

    
asked by anonymous 08.05.2018 / 14:39

1 answer

1

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

Follow your code with the fix, just close the tags in the correct places, and basically organize the code.

See how it went:

OBS: Here in the StackOverflow snippet it gets kinda broken because the width of the box is small. But have it displayed in "Whole Page" to see how it looks. Or you'll have to use @media to handle 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>
    
08.05.2018 / 15:12