JMiur [E]

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;
}

<div id="elContenedor">
<div id="elContenido> </div>
</div>
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;
}

<div id="elContenedor">
<div id="ladoIzquierdo">
<p>... textos ... textos ... textos ...</p>
</div>
<div id="ladoDerecho">
<p>... textos ... textos ... textos ...</p>
</div>
</div>

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:
<div id="contenedor">
....
<div style="clear:both;"></div>
</div>

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:

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.


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:
/* 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:
<div id="elContenedor">
<div id="elSuperior"></div>
<div id="elIzquierdo"></div>
<div id="elDerecho"></div>
<div style="clear:both;"></div>
<div id="elInferior"></div>
</div>


Por casualidad ... ¿no habremos creado las bases de una plantilla donde elContenedor es la página total, elSuperior es el header, elIzquierdo el área de posts, el elDerecho la sidebar y elInferior el footer?

REFERENCIAS:
  • CSS Float HTML Tutorial
  • CSS Float Theory
  • 8 comentarios:

    All Blog Spots  

    nice blog

    Responder
    Anónimo  

    gracias! me has ahorrado el rediseño :D

    Responder
    El Aventurero  

    Hola Vagabundios, vuelvo a la carga con preguntas :D

    No sé muy bien si este post habla de a lo que yo me voy a referir...: he visto que este blog, (y otros muchos), cuando pasa de estar de ventana completa a ventana más pequeña, el contenido no se junta y adapata al nuevo tamaño de la ventana, sino que sigue con las misma distribución, y si quieres ver lo que no se ve debes mover las barritas horizontal o vertical de los margenes de la ventana.

    En mi blog sí se junta y adapta al nuevo tamaño de la pagina ( http://aventura-grafica.blogspot.com ) , y quisiera cambiarlo a como está en este blog. ¿Cómo podría hacerlo?

    Muchas gracias :)

    Responder
    JMiur  

    El Aventurero:

    La diferncia básica es la forma en que se establecen los anchos (propiedad width) de los elementos. En tu caso, están definidos como porcentajes:

    #main-wrapper ... width: 72%;
    #sidebar-wrapper ... width: 20%;
    y #footer como valor "fijo" ... width:660px;

    El porcentaje, hace que el contenido del blog se adapte a la resolución de la pantalla. Elos valores fijos hacen que el contenido siempre sea el mismo y, si la resolución es menor, aparezcan barras de desplazamiento horizontales.

    ¿Se puede modificar? Si. Una prueba que puedes hacer es modificar esos dos valores nada maás; por ejemplo, ponerles:

    #main-wrapper ... width: 550px;
    #sidebar-wrapper ... width: 250px;

    Allí, quedaría más o menos igual a como lo veo ahora con una resolución de 1024 de ancho pero todos esos valores dependerá mucho de lo que quieras hacer.

    Responder
    Maik  

    Saludos y muchas gracias por el blog.
    Mi pregunta es sobre que es mas recomendable entre posicionar todos los elementos de manera absoluta o flotante.
    Porque estoy rediseñando mi pagina en photoshop y cuando lo guardo en opciones html y css me coloca todo en posiciones absolutas y luego en dreamweaver se me hace mas facil moverlos donde quiera solo arrastrando.
    Que incovenintes puedo tener con esto?
    Gracias de nuevo

    Responder
    JMiur  

    No hay una verdad absoluta para eso. Si se usan posiciones absolutas hay que ver si son absolutas respecto de qué, si lo son respecto del BODY, quedará mal porque las resoluciones de pantalla varian y los navegadores varian así que el centro no siempre será el centro.

    JAmás he ustilizado no Photoshop ni Dreamweaver así que no sabría decirte qué hacer. Lo único que podría aconsejar es ver el resultado online, usando distintos navegadores y con distintas resoluciones de pantalla para que el resultado sea razonablemente aceptable en todos los casos.

    Responder
    Maik  

    Muchas gracias.
    Voy a practicar de todas las maneras para ir aprendiendo.
    Gracias por tomarte el tiempo y contestar.
    Suerte!

    Responder
    Silvio  

    Muy bueno !!! la verded leí un montón de post que hablan de containers con css . Pero no entendía nada. COn este reslví mi problema. Te doy 9 Quintines...

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR