Problema con el float left

[chrishxc]

No se exactamente como contar mi problema, así que opto por ponerles una imagen:


Básicamente, todos los divs están en float left, pero lo que quiero es que la 3ra y 4rta capa, se situen todo lo arriba que puedan (sin coger de referencia a la capa más larga). Todas las capas están en relativo.

Es posible?
Gracias a todos =)

[GAST0N]

deja el html y el css de esas partes... asi lo podemos revisar =)

por lo q veo es como q hay un contenedor de los 3 bloques de arriba y eso impide q suban las de abajo...

pero como dije antes, deja los codigos para mas seguirdad ...

saludos!

[chrishxc]

No no hay un bloque. La 4rta capa coge de referencia la capa más larga (este caso la 3ra), cuando a mi me gustaría que se pusiera lo más arriba posible (debajo de la 1)

El código es este:

Código:

 
  <!-- PDF's -->
  <div id="pdf-llistat"> <div align="center"><img src="imgs/pdf/borrar-1.jpg" width="192" height="221" />    </div>
    <div id="pdf-llistat-blanc"> <div align="left" class="news-text"> <div align="justify">
    El monestir de Sant Pere de Rodes fou una abadia benedictina de l'antic comtat d'Empúries, dins els límits del bisbat de Girona, situada a l'actual terme     municipal del Port de la Selva (Alt Empordà).      
    </div>     </div>     </div>
    <div id="pdf-llistat-degradat"></div>
  </div>

Hay 3 divs.

#pdf-llistat: Lleva todos los paddings, me sirve de "contenedor" de la imagen y del texto posterior.

#pdf-llistat-blanc: Es el cuadrado blanco que contiene el texto.

#pdf-llistat-degradat: lleva el degradado de abajo

Todos ellos se repiten tantas veces como documentos hayan, y la idea es que se situaran solos en su posición.

El texto de estos divs:

#pdf-llistat {
width:192px;
padding-left:28px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
float:left;
}

#pdf-llistat-blanc {
width:192px;
padding-top:05px;
padding-bottom:05px;
float:left;
background-color:#FFFFFF;
}

#pdf-llistat-degradat {
width:192px;
float:left;
height:8px;
background-image:url(../imgs/degradat.gif);
float:left;
}

Gracias por la ayuda =)

[chrishxc]

Pongo una segunda imagen por si es de ayuda.
Esto es lo que pasa si a la tercera capa le reduzco el texto.

[GAST0N]

perdon de nuevo, una pregunta ya subiste la pagina al servidor???.. si es asi podrias darme el link?? porfas.. asi seria mas facil revisar..

si no lo tenes subido, entonces deja el codigo entero completo del html y el css

gracias =)

[chrishxc]

Al contrario, gracias a ti.

La web que me da problemas la he colgado en la siguiente dirección:

http://www.terramar.org/gironactiva/a-escolar.php

Y la hoja de estilos la puedes consultar aquí:

http://www.terramar.org/gironactiva/estil/estil.css

[GAST0N]

bueno chrishxc , tu error esta en q estas repitiendo las ID , y eso no se puede hacer, deberas cambiar de ID a CLASS

En el Html

tenes asi:

<div id="pdf-llistat">
<div id="pdf-llistat-blanc">
<div id="pdf-llistat-degradat">

te debe quedar asi:

<div class="pdf-llistat">
<div class="pdf-llistat-blanc">
<div class="pdf-llistat-degradat">

y en el CSS

#pdf-llistat:
#pdf-llistat-blanc
#pdf-llistat-degradat

te deben quedar asi:

.pdf-llistat:
.pdf-llistat-blanc
.pdf-llistat-degradat


Y LISTO PROBLEMA SOLUCIONADO!!!

SALUDOS =)

[chrishxc]

Pues no sé si estoy haciendo algo mal... pero cambiándolo a class me hace exactamente lo mismo, actúa de la misma forma que lo hacía con id

[GAST0N]

Iniciado por chrishxc

Pues no sé si estoy haciendo algo mal... pero cambiándolo a class me hace exactamente lo mismo, actúa de la misma forma que lo hacía con id

entre a la pagina y no veo los cambios, los guardaste bien?? porque yo los sigo biendo con ID.. en el html y css

[chrishxc]

No lo he subido, estaba mirándolo con el firebug, pero me pasa lo mismo.
Ahora está subido, con las clases y actúa igual =\

[GAST0N]

Iniciado por chrishxc

No lo he subido, estaba mirándolo con el firebug, pero me pasa lo mismo.
Ahora está subido, con las clases y actúa igual =\

aa deveras.. vi mal entonces!!... perdon... de todas formas las clases dejalas, esas si estan bien..

voy a ver q puede ser

[chrishxc]

Yo llevo 2 horas probando mil combinaciones. No me creo que no se pueda hacer.
Aunque a mala hora tuve yo de hacer esto (con lo fácil que sería limitar los carácteres del div y que todos fueran idénticos).

[GAST0N]

Iniciado por chrishxc

Yo llevo 2 horas probando mil combinaciones. No me creo que no se pueda hacer.
Aunque a mala hora tuve yo de hacer esto (con lo fácil que sería limitar los carácteres del div y que todos fueran idénticos).

LA VERDAD Q YA INTENTE DEMASIADO Y NO SALE.. EL PROBLEMA ES Q AL LLAMARSE TODOS IGUALES TDOS TOMAN LAS MISMAS PROPIEDADES , POR ESO EL DIV Q TIENE MAS TEXTO SE HACE MAS LARGO Y POR ENDE AFECTA A TODOS TOMANDO COMO ULTIMA LINEA EL DE MAS CONTENIDO...

LA UNICA SALIDA Q VEO ES PONERLE DIFERENTES NOMBRES A LOS DIV Q CONTIENEN A LOS CUADROS...

[chrishxc]

Yo tampoco soy capaz de encontrar la forma. Lo peor de todo es que vi una web que hacía algo igual pero no soy capaz de encontrarla tampoco.

Si la web fuera estática sería fácil, el problema es que va ligada a una base de datos, con lo que todo el proceso tiene que ser automático, y crear varios divs con varios nombres no es viable.

Una lástima, pero haré el plan B: limitación de carácteres y de dimensiones de imagen para que todo salga igual.

[GAST0N]

Iniciado por chrishxc

Yo tampoco soy capaz de encontrar la forma. Lo peor de todo es que vi una web que hacía algo igual pero no soy capaz de encontrarla tampoco.

Si la web fuera estática sería fácil, el problema es que va ligada a una base de datos, con lo que todo el proceso tiene que ser automático, y crear varios divs con varios nombres no es viable.

Una lástima, pero haré el plan B: limitación de carácteres y de dimensiones de imagen para que todo salga igual.

tendrias el link de la web q decis¨??

[chrishxc]

Lo he estado buscando por el historial y no lo encuentro. Mañana miraré en el portátil, que no la viera allá. Que rabia no haberla guardado.

Al verlo me pareció a priori fácil... pero vaya nochecita me ha dado.

[GAST0N]

Iniciado por chrishxc

Lo he estado buscando por el historial y no lo encuentro. Mañana miraré en el portátil, que no la viera allá. Que rabia no haberla guardado.

Al verlo me pareció a priori fácil... pero vaya nochecita me ha dado.

seguro q hay solucion... a mi ya me dio curiosidad de saber cual es... en un rato me pongo a investigar... si encuentro la solucion , te aviso ..

saludos!!