CSS Layout – width y max-width

Usar width, max-width y margin: auto

Como se mencionó en el capítulo anterior, un elemento block siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).

Establecer el ancho de un elemento block evitará que se extienda hasta los bordes de su contenedor. Luego, puedes establecer los márgenes en automático, para centrar horizontalmente el elemento dentro de su contenedor. El elemento ocupará el ancho especificado y el espacio restante se dividirá en partes iguales entre los dos márgenes:

Nota: El problema con el <div> anterior ocurre cuando la ventana del navegador es más pequeña que el ancho del elemento. Luego, el navegador agrega una barra de desplazamiento horizontal a la página.

Usar max-width en su lugar, en esta situación, mejorará el manejo de ventanas pequeñas por parte del navegador. Esto es importante al hacer que un sitio se pueda usar en dispositivos pequeños.

Consejo: cambia el tamaño de la ventana del navegador a menos de 500 px de ancho, para ver la diferencia entre los dos divs.

Aquí hay un ejemplo de los dos divs anteriores:

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>CSS Max-width</h2>

<div class="ex1">This div element has width: 500px;</div>
<br>

<div class="ex2">This div element has max-width: 500px;</div>

<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between 
the two divs!</p>

</body>
</html>