Con float y Clear no consigo lo que quiero

Rankxerox1984 · #1 (**permalink**) 19/03/2011, 17:54

Hola a todos y todas:

Estoy presentando los datos para construir una ficha de susuario y lo organizo mediante DIV y float.

Trataré de explicar el Layout que deseo obtener.

Hay un tilulo de ficha que ocupa todo el ancho del contenedor
debajo tenemos una foto alineada con float:Left que ocupa varias líneas y un 25% del ancho del contenedor.
A su lado las líneas se deberían poner unas debajo de otras pero al lado de la foto siguiendo este flujo

titulotitulotitulotitulotitulotitulotitulotituloti tulo

FotoFoto nombre apellido apellido
FotoFoto MailMailMailMailMail
FotoFoto DirecciónDirecciónDirección
FotoFoto Telefono
FotoFoto

Os pongo el html/CSS por si me podéis orientar (Lo he resumido lo qmejor que he podido para no aburrir)

Código HTML:

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
	
<head>

   <title><?php include('phpBits/GoogleBot_TIT.php'); ?></title>

   <meta name="description=" content="<?php include('phpBits/GoogleBot_MET.php'); ?>">

   <meta http-equiv="Content-Type"content=" text/html;charset=utf-8">

 <!--Aquí se indica donde está la hoja de estilos CSS -->

   <!--Aquí se indican los estilos CSS particulares de esta hoja CSS -->

   <style>

/*Fichas*/

			#BOXFicha0{border:1.5px;float:left;width:100%;padding:0.5%;z-index:5;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;font-size:2.5em; color:FireBrick;text-align: Center;font-weight: bold;line-height: auto;}
			#BOXFicha0{font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;font-size:1.5em; color:FireBrick;text-align: Center;font-weight: bold;line-height: auto;}
			#BOXFicha1 img{border:1.5px;width:25%;float:left;padding: 0.5%;z-index:5;}
			#BOXFicha2{width:100%;float:left;width:auto;padding: 0.5%;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;font-size:1.5em;color: FireBrick}
			#BOXFicha3 {float:left;width:auto;padding: 0.5%;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;font-size:1.5em;color: FireBrick}
			

</style>
  
</head >

<body>


	?>
				<div id="BOXFicha0">
				<?php
				$form="Estos son los datos registrados del usuario";
				echo $form;
				?>
				</div>
				<div id="BOXFicha1">
				<?php
				echo '<img src="'.$Foto.'" width="25%" height="25%">'; 
				?>
				</div>
				<div id="BOXFicha3">
				<?php
				echo $Nombre;
				?>
				</div>
				<div id="BOXFicha3">
				<?php
				echo $Apellido1;
				?>
				</div>
				<div id="BOXFicha3">
				<?php
				echo $Apellido2;
				?>
				</div>
				<div id="BOXFicha2">
				<?php
				echo $mailUSER;
				?>
				</div>

	
</body>
</html>

Muchas gracias por la ayuda

laratik · #2 (**permalink**) 19/03/2011, 22:37

Hola Rankxerox1984, no se si entendí bien lo que quieres, si lo que quieres es esto:

Este es el codigo:

Código PHP:

 
<html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
     
<head> 
 
   <title><?php include('phpBits/GoogleBot_TIT.php'); ?></title> 
 
   <meta name="description=" content="<?php include('phpBits/GoogleBot_MET.php'); ?>"> 
 
   <meta http-equiv="Content-Type"content=" text/html;charset=utf-8"> 
 
 <!--Aquí se indica donde está la hoja de estilos CSS --> 
 
   <!--Aquí se indican los estilos CSS particulares de esta hoja CSS --> 
 
   <style> 
 
/*Fichas*/ 
 
            #BOXFicha0{ 
                border:1.5px; 
                float:left; 
                width:100%; 
                padding:0.5%; 
                z-index:5; 
                font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif; 
                font-size:2.5em;  
                color:FireBrick; 
                text-align: Center; 
                font-weight: bold; 
                line-height: auto; 
                } 
            #BOXFicha0{ 
                font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif; 
                font-size:1.5em;  
                color:FireBrick; 
                text-align: Center; 
                font-weight: bold; 
                line-height: auto; 
                } 
            #BOXFicha1 img{ 
                border:1.5px; 
                width:25%; 
                float:left; 
                padding: 0.5%; 
                z-index:5; 
                } 
            #BOXFicha2{ 
                width:100%; 
                clear: both; 
                width:auto; 
                padding: 0.5%; 
                font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif; 
                font-size:1.5em; 
                color: FireBrick; 
                } 
            #BOXFicha3 { 
                float:left; 
                width:auto; 
                padding: 0.5%; 
                font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif; 
                font-size:1.5em; 
                color: FireBrick 
                } 
                 
                #cont { 
                    float: left; 
                } 
             
 
</style> 
   
</head > 
 
<body> 
<?php 
$Nombre = "Elber"; 
$Apellido1 = "Gomez"; 
$Apellido2 = "Torba"; 
$mailUSER = "[email protected]"; 
$direccion = "av siempre viva"; 
$telefono = "5555555"; 
    ?> 
                <div id="BOXFicha0"> 
                <?php 
                $form="Estos son los datos registrados del usuario"; 
                echo $form; 
                ?> 
                </div> 
                <div id="BOXFicha1"> 
                <?php 
                echo '<img src="'.$Foto.'" width="25%" height="25%">';  
                ?> 
                </div> 
                <div id="cont"> 
                <div id="BOXFicha3"> 
                <?php 
                echo $Nombre;$Apellido1;$Apellido2; 
                ?> 
                </div> 
                <div id="BOXFicha3"> 
                <?php 
                echo $Apellido1; 
                ?> 
                </div> 
                <div id="BOXFicha3"> 
                <?php 
                echo $Apellido2; 
                ?> 
                </div> 
                <div id="BOXFicha2"> 
                <?php 
                echo $mailUSER; 
                ?> 
                </div> 
                <div id="BOXFicha2"> 
                <?php 
                echo $direccion; 
                ?> 
                </div> 
                <div id="BOXFicha2"> 
                <?php 
                echo $telefono; 
                ?> 
                </div> 
                 
                </div> 
 
 
</body> 
</html>

Si no era lo que necesitabas, se un poco más especifico.

C2am · #3 (**permalink**) 19/03/2011, 22:58

Te dejo un ejemplo más simple, donde el texto si se extiende mucho hacia abajo envolverá a la imagen.
Es solo para que veas que no hacen faltas tantos div.
Y deberías crear un div llamado Ficha donde pones el tipo de fuente y demás estilos generales, porque si observas repites casi lo mismo en cada #BOXficha.

Código HTML:

Ver original<head>
<style type="text/css">
<!--
.foto {float:left;}
-->
</style>
</head>
 
<body>
 
<div id="Ficha">
    <h2 id="Titulo">
    Titulo
    </h2>
    
    <img class="foto" src="imagenes/muestra.jpg" />
   
    <div id="datos">
    NOMBRE<br />
    Mail<br />
    Direccion<br />
    Telefono
    </div>
 
</div>
 
</body>