Problema con divs relativos.

[chrishxc]

Hola de nuevo. Tengo una duda que a ver si saben como solucionarla.

Estoy haciendo una web que tiene un montón de DIVS uno detrás de otro. La información que va en cada uno de estos DIVS es variable, por lo que su estructura es parecida a:

Código:

<div id="bloque1>Info</div>
<div id="bloque2>Info2</div>

Donde cada div es algo como:

Código:

#bloque1{ width:560px; background-color:#f3f3f3;}

Dicho de otro modo: Se suceden los divs para que independientemente de la longitud de uno, el otro le vaya detrás y así sucesivamente.

El problema lo tengo en uno de los divs, donde aparte de ir información variable, desearía tener un div alineado a la derecha y otro a la izquierda. (un lateral es información y el otro lateral es un calendario).
Como los divs entre ellos no son ni relativos ni absolutos, no tengo forma de poner un div a cada uno de los extremos de la capa, y si hago un float left/right, el siguiente div ya no queda seguido de este.

Alguien sabe como puedo hacerlo?

Espero que se entienda mi explicación. Gracias de antemano =)

[GAST0N]

no logro entender como queres que queden los divs... podrias hacer una grafica.. aunq sea con paint?? xD

[chrishxc]

Pongo el ejemplo real:


Como veis, el calendario queda abajo a la izquierda, cuando me gustaría que quedase justo al lado del panel de noticias.
Esto es así pq el panel está configurado de la siguiente forma:

Código:

<div id="body> (el color naranja de fondo)
    <div id="news"> (el color blanco que lo engloba todo)
        <div id="panel-noticias></div>
        <div id="panel-agenda></div>
    </div>
</div>

Esto sucede por que por más que le diga que se ponga a 0px right, el panel agenda, al no tener ninguna capa en absolute, no tiene referencia.

El tema está en que todas las capas son relativas, para que como he dicho, si el panel de noticias tiene 6 noticias en vez de 3, el div "panel-noticias" y "body" se alarguen hasta abajo, y el panel footer (el degradado azul) se mantenga debajo de todo.

[GAST0N]

Dale float left a los 2 div

<div id="panel-noticias></div>
<div id="panel-agenda></div>

[jomaruro]

Hola:

¿Has comprobado que los dos divs, incluidos margin, padding, border y width, "quepan" dentro de su contenedor?

Saludos.

[chrishxc]

Iniciado por GAST0N

Dale float left a los 2 div

<div id="panel-noticias></div>
<div id="panel-agenda></div>

Con floats lo puedo solucionar, pero entonces la capa de fondo (el recuadro de color blanco que me distingue esta capa de las demás) no se alarga junto a la agenda y a las noticias.


Estoy empezando a pensar que no se puede hacer lo que quiero si no es con divs absolutos.

Iniciado por jomaruro

Hola:

¿Has comprobado que los dos divs, incluidos margin, padding, border y width, "quepan" dentro de su contenedor?

Saludos.

De caber caben. El tema es que como el contenedor este está en relativo, no puedo decirle al div "agenda" que se ponga a right:0px, top:0px.

[GAST0N]

es cuestion de maquetar bien, lo que queres hacer es muy sencillo... por favor deja el link de la pagina... lo acomodo mediante firebug , y luego te paso el codigo

[chrishxc]

La web está en esta dirección: http://server.gironactiva.com/gironactiva/terramar/

La hoja de estilos está en la siguiente dirección:
http://server.gironactiva.com/girona...stil/estil.css

Muchas gracias por la ayuda =)

[GAST0N]

tu problema es porq usas position absolute en el wraper , tambien tenes q darle float left a los principales div q contienen informacion...menos al contenedor principal ...esta mal maquetado desde un principio por eso no se acomodan los div, empeza con una estructura basica:

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id footer></div>
</div>

esos serian los principales bloques de contencion... y dentro va la info.. los sub bloques ponelos con clases y no con id..

todos esos div dale float left , menos al wrapper...

[chrishxc]

Muchas gracias por tu ayuda!!! No se me había ocurrido lo de sacarle el absolute en el wrapper =/ aparte de que no sabía la diferencia entre class y id (siempre se aprende algo).

Pero bueno, ahora me encuentro con un pseudo-problema que ya me encontraba en la primera fase, y es que dentro de wrapper que ocupa el 100% tengo un div llamado "body" que sirve para: limitar la página a 1000px de ancho, darle un bg y centrar toda la página con un "margin-left/right".

Al aplicarle un float left a todas las capas que están dentro de este body (todas excepto wrapper) este body no se alarga junto al contenido, y si tambien le pongo float left, no se me centra la web.


Editado: Nada nada... solucionado. Me queda un paso más, que lo miro antes de preguntar!!!! ;)

[chrishxc]

SOLUCIONADO!!!

Con tus consejos ya ha quedado todo perfecto, tal y como quería.
Muchas gracias por todo!!!!

Un abrazo!