problema con float

only_skating · #1 (**permalink**) 12/09/2009, 08:18

hola amigos, estoy haciendo unas cosas en css, y para poder poner 2 divs al lado he tenido que usar la opción float, el problema es que quiero bajar de parrafo ya, y no me deja, he creado otra clase para intentar bajarle y tampoco.

gracias por su atencion

mayid · #2 (**permalink**) 12/09/2009, 09:26

No entendi la pregunta, pero si te funciona el float es por una de dos: porque tenes ancho fijo para los divs, o porque ya estas usando: display: inline

SI aun no lo haces, intenta: {display: inline} junto con el float.

Como es eso de que no bajan los parrafos?

cristian_cena · #3 (**permalink**) 12/09/2009, 14:48

Hola only_skating:

Al igual que mayid no entiendo mucho lo que quieres decir.

Solo llego a imaginar que con "bajar de parrafo" te refieres a incluir otro div contenedor que se encuentre por debajo de tus divs flotados.

Si eso es lo que quieres ponle a ese nuevo div la propiedad clear:both;. Si no es eso lo que quieres prueba posteando el código para que te puedan ayudar.

Saludos!

only_skating · #4 (**permalink**) 12/09/2009, 15:40

si, lo que quiero es meter texto debajo de los 2 divs flotantes, no necesito que sea otro div, he probado con clear:both, pero el texto me aparece entre los 2 float.

.caractuser {
overflow:hidden;
width:250px;
margin-left:25px;
background:#D7DBFD;
font-size:20px;
border:#707AFE solid;
float: left;
}
.videoobject1 {
overflow:hidden;
margin-left:20px;
float:right;
}
.videosuser {
clear:both;
}
saludos y gracias

cristian_cena · #5 (**permalink**) 12/09/2009, 17:19

Pues el texto debe estar contenido en algun lado. Si quieres que aparezca debajo y no en el medio anidalo en un div y a este div dale clear:both; o bien aprobecha la clase creada...

<div class="videosuser">aqui tu texto</div>

Postea el codigo completo de tu pagina, html+css asi lo vemos con precisión.

only_skating · #6 (**permalink**) 13/09/2009, 03:13

aqui te dejo:

Código PHP:

  echo '<div class="caractuser">
      <p class="fontcaractuser">'.$row['nombre'].'&nbsp;&nbsp;'.$mostrar['nacimiento'].'</p>
      <p class="fontcaractuser">Alias:&nbsp;'.$row['nick'].'</p>
      <p class="fontcaractuser">Provincia:&nbsp;'.$row['provincia'].'&nbsp;'.$mostrar['localidad'].'</p>
      <p class="fontcaractuser">¿Patinas?'.$mostrar['skater'].',&nbsp;'.$mostrar['posicion'].'</p>
      <p class="fontcaractuser">Modalidad:&nbsp;'.$mostrar['modalidad'].'</p>
      <p class="fontcaractuser">Truco favorito:&nbsp;'.$mostrar['truco'].'</p>
      </div>';

Código PHP:

  echo '<div class="videoobject1"><a href="watchfotos1.php?var='.$mostrar['codigo'].'&variable2=archivosusuario/fotos/'.$mostrar['codigo'].'"><img src="archivosusuario/fotos/'.$mostrar['codigo'].'" height="120px" width="120px"></a>&nbsp;
</div>';
}
echo '<p><a href="pautor.php?codaut1='.$autor.'">Ver todas las fotos de este autor</a></p>';

y este es el texto que quiero que vaya debajo de los 2 codigos anteriorers que están con float

Código PHP:

  echo '<p class="videouser" align="center"><a href="pskaters.php?var4=$titulo&variable4=$id">'.$mostrar['titulo'].'</a></p>';

y aqui los css, si falta alguno es porque no es relevante ya que puede ser una clase de letra...

Código:

.caractuser {
	overflow:hidden;
	width:250px;
	margin-left:25px;
	background:#D7DBFD;
	font-size:20px;
	border:#707AFE solid;
	float: left;
}
.fontcaractuser {
	font-family:"Comic Sans MS", cursive;
	font-size:16px;
	color:#000;
	margin-left:05px;
}
.videoobject1 {
	overflow:hidden;
	margin-left:20px;
	float:right;
}
.videosuser {
	clear:both;

cristian_cena · #7 (**permalink**) 13/09/2009, 09:54

Se me ocurre que puedes agregar: <div style="clear:both"></div>
en donde quieras que "baje".

Aunque te sera muy dificil posicionar tu contenido si no usas un div contenedor, por ejemplo, actualmente tendrias algo asi:

<body>
<div class="caractuser">contenido del div1 </div>
<div class="videoobject1">contenido del div2</div>
<div style="clear:both"></div>
<p class="videouser" align="center">
<a href="#">enlace dentro de tu texto</a>
</p>
</body>

y deberias tener algo parecido a esto otro:

<body>
<div id="content">
<div class="caractuser">contenido del div1 </div>
<div class="videoobject1">contenido del div2</div>
<div style="clear:both"></div>
<p class="videouser" align="center">
<a href="#">enlace dentro de tu texto</a>
</p>
</div>
</body>

mayid · #8 (**permalink**) 13/09/2009, 20:15

Y si. Hay que envolver, y agregar un renglon abajo.

only_skating · #9 (**permalink**) 14/09/2009, 01:47

ok muchas gracias cristian por tu ayuda, me fue muy util. mil gracias