[SOLUCIONADO] Posicionamiento, overflows y displays

[dooplanillo]

Buenas a todos, me encuentro con un problema que no se solucionar. Espero que alguien pueda guiarme a encontrar la solución.

Tengo un div que anida a otros varios con sus floats, con lo que le tengo puesto un overflow hidden para limpiar los floats, lo llamaremos .contenedor. Luego, uno de los divs que se encuentran dentro, a hacer un rollover, muestra otro div que sobrepasa en altura al div .contenedor y claro, no se muestra en su totalidad.

Lo que necesito es que al mostrar el div oculto, se muestre en su totalidad.
Lo intento explicar con código:

Código:

<div class="contenedor">
     <div class="info">
          <div class="tooltip"></div>
     </div>
</div>

y las css:

Código:

.contenedor {
        max-width:1100px;
	padding-top:1.5em;
	overflow:hidden;
	z-index:333;
	position:relative
}
.info {
        position: relative;
}
.tooltip{
        position: absolute;
        top:-90px;
        left:-50px;
        display:none;
	border:solid 2px #7b7a7a;
	background:#f5f5f5;
	padding:14px;
        z-index:999
}

[jonni09lo]

No uses overflow:hidden en este caso, usa mejor un microclearfix:

Código CSS:

.contenedor {
    max-width:1100px;
    padding-top:1.5em;
    z-index:333;
    position:relative
}
 
.contenedor:before,
.contenedor:after {
    content: " ";
    display: table;
}
 
.contenedor:after {
    clear: both;
}
 

Saludos

[dooplanillo]

Funciona perfectamente!

No conocía esa manera de limpiar floats. Apuntado para próximos proyectos.

Una pequeña duda más:

Para posicionar elementos que no son parentales, no hay más rememio que usar JS supongo.....

Muchíiisimas gracias jonni09o

[pzin]

Iniciado por dooplanillo

Para posicionar elementos que no son parentales, no hay más rememio que usar JS supongo.....

¿Qué cosa?

[dooplanillo]

Pues el problema está en lo siguiente:
tengo el div contenedor que a su vez tiene otros divs (el ejemplo de más arriba)
Bien el div contenedor se repite n veces ya que la página en cuestión es una página de resultado de una búsqueda. Cuando rollover sobre el div .descripcion, se muestra el div .elementoOculto. El tema está en que el div .elementoOculto es mucho más alto que el propio div .contenedor, con la explicación anterior se solucionó el tema que se muestre sobre dicho div, pero la imagen del div .descripción de los resutados siguientes salen sobre el div elementoOculto del anterior.
No se si me he explicado bien,pongo un ejemplo:

Por lo que sé el atributo z-index solo vale con padres y sus hijos, por eso digo lo de javascript...

Código:

<div class="granContenedor">
     <div class="contenedor"><!--primer resultado -->
          <div class="contenidoIzquierda">.....contenido</div>
          <div class="contenidoDerecha">
               <div class="descripcion">imagen</div>
               <div class="elementoOculto">....contenido</div>
          </div>
     </div>
     <div class="contenedor"><!-segundo resultado -->
          <div class="contenidoIzquierda">.....contenido</div>
          <div class="contenidoDerechaa">
               <div class="descripcion">imagen</div>
               <div class="elementoOculto">....contenido</div>
          </div>
     </div>
   ......
   ......
   ......
     <div class="contenedor"><!--resultado n -->
          <div class="contenidoIzqueirda">.....contenido</div>
          <div class="contenidoDerecha">
               <div class="descripcion">imagen</div>
               <div class="elementoOculto">....contenido</div>
          </div>
     </div>
</div>

Las clases:

Código:

.granContenedor {
        max-width:1100px;
	padding-top:1.5em;
	position:relative;
	z-index:333;
}
.contenedor {
    border-bottom: 2px solid #5A5A5A;
    height: 1%;
    max-width: 1100px;
    padding: 16px 0 12px;
    position: relative;
    z-index: 20;
}
.contenidoIzquierda {
     float:left;
     ......
}
.contenidoDerecha {
     float:left;
     position:relative;
     z-index:10
}
.contenidoOculto {
     background: none repeat scroll 0 0 #F5F5F5;
    border: 2px solid #7B7A7A;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.75);
    display: none;
    left: 0;
    padding: 14px;
    position: absolute;
    text-align: left;
    top: -70px;
    width: 290px;
    z-index: 100;
}

[pzin]

¿Y cómo quieres que salgan? ¿Por encima o por debajo?

O igual no entendí bien. ¿Lo tienes en algún sitio publicado? ¿O puedes poner un ejemplo funcional en un jsfiddle?

[dooplanillo]

Me gustaría que el contenido oculto siempre salga por encima de cualquier div de la página.
Voy a intentar hacer un ejemplo funcional en jsfiddle

[pzin]

Iniciado por dooplanillo

Me gustaría que el contenido oculto siempre salga por encima de cualquier div de la página.

Bueno, entonces puedes cambiar el valor de z-index cuando se pase por encima del contenedor pequeño.

Código CSS:

div.contenedor:hover {
  z-index: 999;
}
 

Así queda siempre por encima. Bueno, a menos que haya otro elemento con ese valor o mayor, claro.

[dooplanillo]

http://jsfiddle.net/dooplanillo/GXhMD/13/

[pzin]

Pues lo dicho, con mi comentario anterior lo solucionas.

[dooplanillo]

Gracias Crack!!!!