Posicionado flotante saregune CC 2009

desbordamientos Desbordamientos ¿Qué hacer cuando un elemento no cabe en el espacio asignado?

desbordamientos Desbordamientos y ¿por qué le hemos asignado un espacio sin conocer de antemano su contenido?

desbordamiento 1) Ocultarlo El contenido “sobrante” no se muestra.

desbordamiento 2) Visible Mostrar el contenido “sobrante” aún a riesgo de sobre-escritura..

3) Scroll Añadir dos bonitas barras de scroll (desplazamiento) desbordamiento 3) Scroll Añadir dos bonitas barras de scroll (desplazamiento)

desbordamiento 4) que decida el browser Dejar que el navegador decida la mejor solución: estirar el contenedor o añadir scroll

overflow: hidden ocultar visible .. scroll .. auto correción navegador CSS overflow: hidden ocultar visible .. scroll .. auto correción navegador

consejos overflow: Si no forzamos tamaños, no deberemos preocuparnos por el overflow, salvo....

Posicionado flotante Dos elementos flotantes (son hermanos)

Posicionado flotante Un elementos flotante en otro

Posicionado flotante técnicas #contenedor { overflow: auto } Los contenedores 'no se estiran', para acoger elementos hijos flotantes.

Posicionado flotante errores sin overflow: auto, el elemento no se estira, y se sobre-escribe el siguiente.

Posicionado flotante técnicas controlar anchos de los elementos ¿caben los contenidos en el contenedor?

errores Posicionado flotante si no caben..se desplazan abajo

nuestro amigo IE6 correciones es necesario añadir un elemento “rompedor” HTML: <div class='clear'></div> break CSS: div.clear { clear: both }

Error IE6 nuestro amigo IE6 es necesario añadir un elemento “rompedor”

CSS Es confuso ya que: position: no aparece float. float: no vale con position: absolute clear: afecta display: se adecua a block, salvo none

CSS: float float: left | right | none | inherit left flota a la izquierda right flota a la derecha none no flota

CSS: clear clear: left | right | both | inherit left no hay flotantes a la izquierda. right no hay flotantes a la derecha. both no hay flotantes.

Debilidades posicionado flotante Es difícil controlar que dos elementos flotantes, tengan la misma altura.

posicionado flotante solución fondo falso Fondo falso

posicionado flotante solución fondo falso Fondo falso