Como acomodar capas

Tengo el siguiente problema: Las capas se superponen.
a.- la capa celeste tiene un float:left
b.- la capa azul contiene la imagen
c.- la capa gris: QUIERO QUE QUEDE ABAJO, pero sin encimarse

Ya probé con el z-index y nada..
este es el código...

Código :

<div id="encabezado">Novedades<a name="up"></a>
         </div><br>
           <div id="contnovedad" class="textogrisizq">
              <div>
                     <div class="titulonovedad">Semana Santa
                 </div>
                       <p>En el periodo del 12 al 20 de Abril no hay actividades en la c&aacute;tedra. <a href="http://www.educared.org.ar/CAL_EDU/04/04_12al20.ASP" target="_blank" class="enlnoved">M&aacute;s informaci&oacute;n</a></p>  
                 <div class="titulonovedad">Materiales did&aacute;cticos
                </div>
                     <p>En la secci&oacute;n materiales di&aacute;cticos, publicamos las gu&iacute;as de laboratorio y series de problemas.</p>
             </div>
         </div>
         <div style="margin-left:300px; overflow:visible; background-color:#0099FF;"><img src="qa_arch_novedades/imagenes/facena.jpg" alt="facena">
              </div>
         <div style="height:120px; width:400px; background-color:#999999;"></div>

Y el css

Código :

#contnovedad {
   width:250px;
   float:left;
   background-color:#66FFFF;
   }

Además otro problema muyy importante. CUANDO PUSE FLOAT AL DIV DENTRO DE CONTENIDO, CUANDO CRECÍA DIV NO CRECÍA CONTENIDO

Prueba a ponerle debajo del código de la capa que contiene la image un

Código :

<div style="clear:both"></div>

Al menos lo probé y tiró la capa gris hacia abajo de las otras dos. (Si entrendí bien lo que querías hacer )

¿Estás poniendo los estilos dentro del código o sólo lo hiciste acá para el ejemplo? Porque siempre es mejor mantener ambas cosas separadas y llevar todos los estilos a la hoja. Así podés, por ejemplo, reusar los estilos y optimizar el código.

En realidad pongo los estilos mientras trabajo y depues los paso a la hoja de estilos, me hace mas fácil el trabajo. Ok voy a probar lo de clear:both.
Gracias

FUNCIONÓ A LA PERFECCIÓN

Gracias elke

RazorBuzz escribió:

Si, por eso pregunté. Me alegro que te haya servido.

Uffff..
Ahora esto:


No entiendo por que la capa contenido no se alarga con el "contenido" (los divs hijos).

Este es el css de la capa que se ve medio roza

Código :

#otrasnov {
   height:60px;
   clear:both;
   margin-left:10px;
   background-color:#F0F0F4 ;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:9px;
   color: #999999
}

Y este de la capa contenido

Código :

#contenido {
   margin-left:140px;
   top:0px;
   width: 580px;
   overflow:visible;
   z-index:5;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   background-color: #FFFFFF;}

Espero se entienda..

Gracias de antemano

razorbuzz, creo que ya habíamos "solucionado" un problema similar. NO debes asignar altos de los elementos si quieres que el contenido se autoacomode

Pero si no asigne ningun alto. A cual te referis?

a esto:

Código :

height:60px;

Gracias por la ayuda. No quiero ser tan molesto. Pero ahora me aparece una LINEA FEA:twisted: .

Como puedo eliminarla?. Lo curioso es que la linea parece entre la capa contenido y footer. Los códigos son los mismos de arriba, solo cambia que le quité el heght:60px


Gracias

razorbuzz, una recomendación personal:
intenta cosas, quita línea por línea y prueba si cambia algo, cambia valores, quita, agrega, intenta cosas, vamos! no te podemos estar ayudando por cada pequeño detalle que tengas.

en el tema específico, échale un ojo al margin-left que tienes en tu css.....