Como hacer un diseño web liquido o fluido

Para empezar esta entrada me gustaría lo primero diferenciar dos tipos de diseño web (aunque podríamos dar 3 o incluso más):

  • Diseño Fijo: Es aquél en el que se establecen como tamaño de la estructura unas medidas inalterables por el navegador. (por ejemplo este blog)
  • Diseño líquido: Son diseños creados para no tener un ancho fijo, permiten que el navegador lo adapte a su tamaño. Se diseñan usando porcentajes (%), por lo que los elementos que seleccionemos podrán tener un tamaño proporcionado al tamaño del navegador. Fueron creados para aprovechar al máximo los nuevos monitores (panorámicos).

En esta entrada vamos a ver cómo realizar un diseño web líquido sin morir en el intento o caer en errores.

Para empezar necesitamos una estructura, en este caso he escogido una de tres columnas, para jugar con dos sidebar laterales y un contenedor central dinámico.

La idea es la siguiente:

Como podeis ver, además del header y footer (cabecera y pié de página respectivamente), contaremos con tres columnas, dos laterales (una a cada lado) de ancho fijo y una central de ancho dinámico.

Para conseguir esto basta con este código HTML dentro del body de nuestro sitio:

<div id="contentRight">
	<h3>Menú derecho</h3>
</div><!-- /contentRight -->
<div id="contentLeft">
	<h3>Menú izquierdo</h3>
</div><!-- /contentLeft -->
<div id="contentCenter">
	<h2>Contenido</h2>
</div><!-- /contentCenter -->

Como CSS tendremos lo siguiente:

#contentRight, #contentLeft, #contentCenter {
	height: 100%;
	overflow: hidden;
}
#contentRight {
	float: right;
	width: 200px;
}
#contentLeft {
	float: left;
	width: 200px;
}

El header y footer lo dejo a vuestra elección, para que veáis que realmente funciona tenéis aquí un ejemplo de diseño web fluido

Un comentario en “Como hacer un diseño web liquido o fluido

  1. Muchas gracias!!! XD
    Yo estaba con mis prácticas y creando mis páginas, y con la intención de que la página se adaptara al navegador asigne porcentajes a la página!
    Pero lei una cosa muy rara, de diseño líquido y diseño fijo, y ahora elástico! Sin saber, mi método de diseño es líquido *-*

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

Menú

Centro de preferencias de privacidad

Necesarias

Estas cookies són necesarias para el correcto funcionamiento de este sitio web así como sus funcionalidades internas.

PHPSESSID, gdpr[allowed_cookies], gdpr[consent_types]

Promoción

newsletter_leads

Estadísticas

_gat_gtag_UA_6499264_16, _gid, _ga

Otras