Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problemas para flotar 2 Divs

Estas en el tema de Problemas para flotar 2 Divs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/09/2014, 00:04
 
Fecha de Ingreso: agosto-2011
Ubicación: Playa del Carmen, Quintana Roo
Mensajes: 31
Antigüedad: 11 años, 3 meses
Puntos: 0
Problemas para flotar 2 Divs

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:
Ver original
  1. .Detalleactividad{
  2.   float:left;
  3.     width: 150px;
  4.     text-align:left;
  5.     background-color:#fff;
  6.     border:1px solid #F2F2F2;
  7.  
  8. }
  9. .centrado4{
  10.     /*background-color: #96C;*/
  11.     width: 500px;
  12.    
  13. }
  14.  
  15. .Detalleactividad1{
  16.     float:left;
  17.     width: 250px;
  18.     display:block;
  19.     background-color:#fff;
  20.     border:1px solid #F2F2F2;
  21.     margin-right: 5px;
  22.     margin-top: 0;
  23.  
  24. }

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
  #2 (permalink)  
Antiguo 23/09/2014, 07:56
 
Fecha de Ingreso: julio-2014
Mensajes: 334
Antigüedad: 8 años, 4 meses
Puntos: 30
Respuesta: Problemas para flotar 2 Divs

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?
  #3 (permalink)  
Antiguo 23/09/2014, 20:38
 
Fecha de Ingreso: agosto-2011
Ubicación: Playa del Carmen, Quintana Roo
Mensajes: 31
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Problemas para flotar 2 Divs

Hola,
como podras ver si tiene border:
Código CSS:
Ver original
  1. 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.
  #4 (permalink)  
Antiguo 24/09/2014, 05:14
Avatar de CHuLoSoY  
Fecha de Ingreso: febrero-2002
Ubicación: Ribeira (Galicia)
Mensajes: 1.900
Antigüedad: 20 años, 10 meses
Puntos: 29
Respuesta: Problemas para flotar 2 Divs

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:
Ver original
  1. .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.
__________________
ESQUIO Dominios y Hosting
Las mejores características con los mejores precios.
  #5 (permalink)  
Antiguo 24/09/2014, 17:06
 
Fecha de Ingreso: agosto-2011
Ubicación: Playa del Carmen, Quintana Roo
Mensajes: 31
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Problemas para flotar 2 Divs

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
  #6 (permalink)  
Antiguo 24/09/2014, 21:07
 
Fecha de Ingreso: agosto-2011
Ubicación: Playa del Carmen, Quintana Roo
Mensajes: 31
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Problemas para flotar 2 Divs

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:
Ver original
  1. <div class='titulostour'>Actividades Tour:</div>
  2.              
  3.                  <?php do {
  4.                     if ($row_DatosActividad["strActividad"]!=Null)
  5.                     {  
  6.                 ?>
  7.                    <div class='centrado4'>
  8.                     <div class='cuadreact'>Inicio:</div>
  9.                     <div class='cuadreact1'><?php echo $row_DatosActividad["hrIniActividad"]?></div>
  10.                     <div class='cuadreact'>Fin:</div>
  11.                     <div class='cuadreact1'><?php echo $row_DatosActividad["hrFinActividad"]?></div>
  12.                     <div class='cuadreact'>Actividad:</div>
  13.                     <div class='cuadreact1'><?php echo $row_DatosActividad["strActividad"]?></div>
  14.                   </div>
  15.                   <?php
  16.                     }
  17.                   } while ($row_DatosActividad = mysql_fetch_assoc($DatosActividad));
  18.                    ?>
  19.  
  20.                 <div class="clearfloat"></div>
  21.                 <div class='centrado4'>
  22.                  <div class='Detalleactividad' >Comentarios:</div>
  23.                  <div class="clearfoat"></div>
  24.                  <div class='Detalleactividad1'><?php echo nl2br(utf8_encode($row_DatosTour["txtDetalleactividad"])) ?></div>
  25.                 </div>

Con esto, todo flota en su lugar,

Lo mismo aplico en el codigo PHP para imprimir en PDF

Código PHP:
Ver original
  1. $strHTML = $strHTML ."<div class='titulostour'>Actividades Tour:</div>";
  2.              
  3.                  do {
  4.                     if ($row_DatosActividad["strActividad"]!=Null)
  5.                     {  
  6.                     $strHTML = $strHTML ."
  7.                   <div class='centrado4'>
  8.                    <div class='cuadreact'>Inicio:</div>
  9.                    <div class='cuadreact1'>".$row_DatosActividad["hrIniActividad"]."</div>
  10.                     <div class='cuadreact'>Fin:</div>
  11.                    <div class='cuadreact1'>".$row_DatosActividad["hrFinActividad"]."</div>
  12.                     <div class='cuadreact'>Actividad:</div>
  13.                    <div class='cuadreact1'>".$row_DatosActividad["strActividad"]."</div>
  14.                   </div>";
  15.                     }
  16.                   } while ($row_DatosActividad = mysql_fetch_assoc($DatosActividad));
  17.                  
  18. //comentario de actividades
  19.        
  20.              $strHTML = $strHTML ."<div class='clearfloat'></div>";
  21.              $strHTML = $strHTML ."<div class='centrado4'>";
  22.              $strHTML = $strHTML ."<div class='Detalleactividad' >Comentarios:</div>";
  23.              $strHTML = $strHTML ."<div class='clearfloat'></div>";
  24.              $strHTML = $strHTML ."<div class='Detalleactividad1'>".nl2br(utf8_encode($row_DatosTour["txtDetalleactividad"]))."</div>
  25.               </div>";

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

Código CSS:
Ver original
  1. .clearfloat {
  2.     clear:both;
  3.     height:0;
  4.     font-size: 1px;
  5.     line-height: 0px;
  6. }

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

Saludos

Última edición por sistemas2011; 25/09/2014 a las 21:15
  #7 (permalink)  
Antiguo 26/09/2014, 22:45
 
Fecha de Ingreso: agosto-2011
Ubicación: Playa del Carmen, Quintana Roo
Mensajes: 31
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Problemas para flotar 2 Divs

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

Etiquetas: background, color, divs, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:51.