Cuando empleamos diseño de ancho líquido los elementos se contraen o expanden según el ancho de la ventana del navegador.
El diseño líquido requiere emplear porcentajes para especificar el ancho de cada div de forma que el diseño se estira o contrae para adaptarse al tamaño de la ventana del navegador.
Implementar una página con un diseño de ancho líquido. Disponer una cabecera con un menú, el cuerpo principal con tres columnas y finalmente un pie de página.
El archivo html es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="cabecera">
<ul>
<li><a href="">Opcion 1</a></li>
<li><a href="">Opcion 2</a></li>
<li><a href="">Opcion 3</a></li>
</ul>
</div>
<div class="columna1">
<p>
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
columna1 columna1 columna1 columna1 columna1 columna1
</p>
</div>
<div class="columna2">
<p>
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
columna2 columna2 columna2 columna2 columna2 columna2
</p>
</div>
<div class="columna3">
<p>
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
columna3 columna3 columna3 columna3 columna3 columna3
</p>
</div>
<div id="pie">
<p>Copyright</p>
</div>
</body>
Como podemos observar la estructura de la página HTML no sufre cambios con respecto al diseño con ancho fijo. Donde si podemos identificar cambios es en la hoja de estilo:
* {
margin:0;
padding:0;
}
body {
width: 90%;
margin: 0 auto;
}
#cabecera{
background-color: #eee;
padding: 10px;
margin: 10px;
}
#pie {
background-color: #eee;
padding: 10px;
margin: 10px;
clear:both;
}
.columna1, .columna2, .columna3 {
background-color: #eee;
width: 31%;
float: left;
margin: 1%;
}
li {
display: inline;
padding: 5px;
}
En el elemento body normalmente definimos un ancho de alrededor de 90% para dejar un pequeño espacio a izquierda y derecha de la ventana del navegador. Con (margin: 0 auto;) estamos centrando el contenido:
body {
width: 90%;
margin: 0 auto;
}
En las columnas ahora tenemos que indicar un ancho en porcentajes para cada una de ellas:
.columna1, .columna2, .columna3 {
background-color: #eee;
width: 31%;
float: left;
margin: 1%;
}
Como ventajas este diseño podemos nombrar: La página se amplia para ocupar toda ventana del navegador por lo que hay más espacio en una pantalla grande, si el visitante del sitio tiene una pantalla pequeña la página puede contrato para ajustarlo sin el usuario tenga que hacer scroll izquierda y derecha.
Como desventajas de este diseño podemos nombrar: La página puede verse muy distinta en pantalla muy grandes o muy pequeñas, en pantalla muy grandes las líneas de texto pueden ser muy largas por lo que se hace muy dificultoso la lectura, de forma similar si el ancho es muy estrecho también su lectura, algunos elementos pueden salir de su espacio asignado.