[SOLUCIONADO] Problemas para flotar 2 Divs

[sistemas2011]

Hola,

Estoy usando la libreria DOMPF para imprimir desde PHP.

Busco como solucionar que un 2do Div flote a la derecha.

El codigo es este PHP:

Código PHP:

   $strHTML = $strHTML ."<div class='titulostour'>Actividades Tour:</div>"; 
               
                 do { 
                    if ($row_DatosActividad["strActividad"]!=Null) 
                    {   
                    $strHTML = $strHTML ." 
                   <div class='centrado4'> 
                    <div class='cuadreact'>Inicio:</div> 
                    <div class='cuadreact1'>".$row_DatosActividad["hrIniActividad"]."</div> 
                    <div class='cuadreact1'>Fin:</div> 
                    <div class='cuadreact1'>".$row_DatosActividad["hrFinActividad"]."</div> 
                    <div class='cuadreact1'>Actividad:</div> 
                    <div class='cuadreact1'>".$row_DatosActividad["strActividad"]."</div> 
                  </div>"; 
                    } 
                  } while ($row_DatosActividad = mysql_fetch_assoc($DatosActividad));  
                   
//comentario de actividades 
         
             
             $strHTML = $strHTML ."<div class='centrado4'> 
              <div class='Detalleactividad'>Comentarios:</div> 
              <div class='Detalleactividad1'>".nl2br(utf8_encode($row_DatosTour["txtDetalleactividad"]))."</div></div";  
   

EL CODIGO CSS:

Código CSS:

.Detalleactividad{
  float:left;
    width: 150px;
    text-align:left;
    background-color:#fff;
    border:1px solid #F2F2F2;
 
}
.centrado4{
    /*background-color: #96C;*/
    width: 500px;
    
}
 
.Detalleactividad1{
    float:left;
    width: 250px;
    display:block;
    background-color:#fff;
    border:1px solid #F2F2F2;
    margin-right: 5px;
    margin-top: 0;
 
}
 

Me parece extraño, ya que los margenes de las cajas son menor que el Div principal
y si en el CSS . Detalleactividad1 le modifico esto:
display:inline-block;

Si flota a la derecha, pero en la 2da hoja la información faltante, se pasa de nuevo a la izquierda.

Les agracederia si tiene alguna idea.

Como siempre, también seguiré buscando.

Saludos

[Triby2]

Antes de poner cajas a flotar, si no tienes mucha práctica con eso, te recomiendo que le pongas un borde cada Div para que veas donde se sitúan exactamente.

Has probado de quitarle el Display: block; al div Detalleactividad1?

[sistemas2011]

Hola,
como podras ver si tiene border:

Código CSS:

border:1px solid #F2F2F2;
 

De hecho, he recreado en html y efectivamente se alinea a la derecha tal como están los estilos.
Pero al pasarlo al PHP con DOMPDF, ya no esta respetando los estilos.

[CHuLoSoY]

Y float:right no te funciona ? Los dos están flotando a la izquierda. Supongo que si no existe uno querrás que el segundo vaya a la izquierda o no?

Si el problema es el espacio disponible puedes probar a ponerle a ambas cajas la propiedad box-sizing:

Código CSS:

.detalleActividad1 { box-sizing : border-box; }
 

Esto lo que hace es que el ancho 100% lo toma desde el borde aunque tenga padding por dentro, es decir, una caja de 100px de ancho con padding de 20px seguirá midiendo 100px de ancho. Por lo contrario si no tiene border-box en box-sizing esa misma caja mediría 140px de ancho.

Saludos.

[sistemas2011]

Pues ambos deben de verse a la izquierda, uno detrás del otro.
Ya intente mover uno a la derecha y el mismo resultado.

intentare colocar la propiedad q indicas y te platico.

saludos

[sistemas2011]

Hola,

he aplicado los cambios sugeridos, sin resultado.

El código de esta prueba con la versión HTML que se muestre en pantalla

Código HTML:

<div class='titulostour'>Actividades Tour:</div>
              
                 <?php do {
                    if ($row_DatosActividad["strActividad"]!=Null)
                    {  
                 ?>
                   <div class='centrado4'>
                    <div class='cuadreact'>Inicio:</div>
                    <div class='cuadreact1'><?php echo $row_DatosActividad["hrIniActividad"]?></div>
                    <div class='cuadreact'>Fin:</div>
                    <div class='cuadreact1'><?php echo $row_DatosActividad["hrFinActividad"]?></div>
                    <div class='cuadreact'>Actividad:</div>
                    <div class='cuadreact1'><?php echo $row_DatosActividad["strActividad"]?></div>
                  </div>
                  <?php
                    }
                  } while ($row_DatosActividad = mysql_fetch_assoc($DatosActividad)); 
                   ?>
 
                <div class="clearfloat"></div>
                <div class='centrado4'>
                 <div class='Detalleactividad' >Comentarios:</div>
                 <div class="clearfoat"></div>
                 <div class='Detalleactividad1'><?php echo nl2br(utf8_encode($row_DatosTour["txtDetalleactividad"])) ?></div>
                </div>
 

Con esto, todo flota en su lugar,

Lo mismo aplico en el codigo PHP para imprimir en PDF

Código PHP:

$strHTML = $strHTML ."<div class='titulostour'>Actividades Tour:</div>";
              
                 do {
                    if ($row_DatosActividad["strActividad"]!=Null)
                    {  
                    $strHTML = $strHTML ."
                   <div class='centrado4'>
                    <div class='cuadreact'>Inicio:</div>
                    <div class='cuadreact1'>".$row_DatosActividad["hrIniActividad"]."</div>
                    <div class='cuadreact'>Fin:</div>
                    <div class='cuadreact1'>".$row_DatosActividad["hrFinActividad"]."</div>
                    <div class='cuadreact'>Actividad:</div>
                    <div class='cuadreact1'>".$row_DatosActividad["strActividad"]."</div>
                  </div>";
                    }
                  } while ($row_DatosActividad = mysql_fetch_assoc($DatosActividad)); 
                  
//comentario de actividades
        
             $strHTML = $strHTML ."<div class='clearfloat'></div>";
             $strHTML = $strHTML ."<div class='centrado4'>";
             $strHTML = $strHTML ."<div class='Detalleactividad' >Comentarios:</div>";
             $strHTML = $strHTML ."<div class='clearfloat'></div>";
             $strHTML = $strHTML ."<div class='Detalleactividad1'>".nl2br(utf8_encode($row_DatosTour["txtDetalleactividad"]))."</div>
              </div>";
 

Lo que veo que hace la diferencia es el CSS "clearfloat" y no esta funcionando al convertirlo en PDF

Código CSS:

.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
 

Alguna idea del porque no me reconoce el Clear al quererlo imprimir en el PDF?

Saludos

[sistemas2011]

Voy a dar por cerrado este tema.
Finalmente he seguido revisando que DOMPDF version 0.5.2 no soporta FLOAT:, por tanto he usando version 0.6.1 y tampoco funciona, pero ya es no es tema de CSS.

Gracias