Los navegadores hacen lo que se les ocurre. Los elementos flotantes son un ejemplo práctico del tema y uno de los que mayores problemas causa.
Supongamos que queremos que un elemento contenga a otro. Con HTML y CSS esto es simple:
#elContenedor {
border: 3px solid #FFFFFF;
margin-left: 50px;
}
#elContenido {
background-color: #8080FF;
width: 100px;
height: 100px;
}elContenedor">elContenido>
Pero si, le agregamos al contenido la propiedad float: left, el resultado será otro:
Esto se debe a que cuando no se especifica un valor para el alto de un elemento, este se calcula a partir del alto de los elementos que contiene (más margenes), pero, si el contenido "flota", es lo mismo que "quitarlo" del interior" y el contenedor se queda sin contenido.
#elContenedor {
margin: auto;
text-align: left;
border: 1px solid #0080FF;
}
#ladoIzquierdo {
float: left;
width: 150px;
margin: 10px;
border: 1px dotted #FF0000;
}
#ladoDerecho {
float: right;
width: 100px;
margin: 10px;
border:1px dotted #00FF40;
}elContenedor">ladoIzquierdo">
... textos ... textos ... textos ...
ladoDerecho">
... textos ... textos ... textos ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
La línea que sigue se escribe aquí.
El primer problema es que lo que continúa (el texto en amarillo) se "amolda" y aparece donde no debe. Para eso, podemos usar la propiedad clear que "cancela" con la flotación:
....
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
La línea que sigue se escribe aquí.
Una solución alternativa, la proporcionan en Quirksmode utilizando la propiedad overflow. Esta, permite controlar el desbordamiento de los elementos contenidos, y tiene cuatro valores posibles: auto, visible (valor por defecto), scroll y hidden.
Ese valor por defecto (visible), hace que el contenedor se adapte al tamaño de su contenido. Las otras, mantienen las dimensiones dadas por width y height y permiten controlar el comportamiento de las barras de desplazamiento, mostrandolas siempre (scroll), ocultandolas siempre (hidden) o mostrándolas sólo cuando es necesario (auto).
Todos los valores (excepto visible) asumen que se ha especificado una dimensión, y si no es así, obligan al navegador a calcularla. Por lo tanto, poniendo la propiedad overflow: hidden en el contenedor, este, abarcará al contendido aunque sea flotante:
Ese valor por defecto (visible), hace que el contenedor se adapte al tamaño de su contenido. Las otras, mantienen las dimensiones dadas por width y height y permiten controlar el comportamiento de las barras de desplazamiento, mostrandolas siempre (scroll), ocultandolas siempre (hidden) o mostrándolas sólo cuando es necesario (auto).
Todos los valores (excepto visible) asumen que se ha especificado una dimensión, y si no es así, obligan al navegador a calcularla. Por lo tanto, poniendo la propiedad overflow: hidden en el contenedor, este, abarcará al contendido aunque sea flotante:
Internet Explorer requiere que también debamos establecer el ancho del elemento contenedor así que, en el ejemplo anterior, también le agregamos width: 400px;.
Basándonos en todo lo anterior, ¿por qué no hacer algo un poco más complejo? Este es el código CSS:
Basándonos en todo lo anterior, ¿por qué no hacer algo un poco más complejo? Este es el código CSS:
/* este será el contenedor principal */
#elContenedor {
overflow: hidden; /* porque no conocemos el alto del contenido */
width: 400px; /* para que Internet Explorer lo reconozca */
margin: auto;
border: 2px solid #FFFFFF;
}
/* este será el bloque superior y ocupará todo el ancho*/
#elSuperior {
width: 375px;
height: 50px;
margin: 5px 10px;
border: 2px solid #FF0080;
}
/* el bloque central que flota a la izquierda*/
#elIzquierdo {
float: left;
width: 240px;
height: 100px;
margin: 0px 10px;
border: 2px solid #0000FF;
}
/* el bloque central que flota a la derecha*/
#elDerecho {
float: right;
width: 100px;
height: 100px;
margin: 0px 10px;
border: 2px solid #00FF00;
}
/* este será el bloque inferior y ocupará todo el ancho */
#elInferior {
width: 375px;
height: 50px;
margin: 5px 10px;
border: 2px solid #C0C0C0;
}
Y este es el código HTML:
elContenedor">elSuperior">elIzquierdo">elDerecho">elInferior">
No hay comentarios.:
Publicar un comentario