Diseño de sitio con CSS
Display y Position enseñaron cómo se sientan y apilan las cajas. El diseño de un sitio hace la pregunta mayor: ¿cómo comparten la pantalla con calma las regiones — encabezado, navegación, contenido principal, barra lateral, pie? Primero esboza la carcasa; Flexbox y Grid profundizarán las columnas pronto.
Una caja de herramientas de regiones de layout
📊 Regiones de página de un vistazo
| Región | Trabajo cotidiano |
|---|---|
| Header | Identidad del sitio, acciones principales, a veces búsqueda |
| Navigation | Enlaces a secciones importantes (a menudo dentro o bajo el header) |
| Main | Contenido principal del que trata la página |
| Aside / sidebar | Enlaces relacionados, tips, tarjetas secundarias |
| Footer | Notas legales, nav secundaria, migas de contacto |
| Container | Envoltorio max-width que centra el contenido legible |
Un buen layout empieza en landmarks HTML, luego espaciado y columnas con CSS. Pintar cada caja con position: absolute rara vez escala bien.
Carcasa semántica de página
Nombra las regiones con elementos reales. Las clases afinan el aspecto, pero los landmarks mantienen la estructura honesta para lectores y tecnología asistiva.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}
header,
nav,
main,
aside,
footer {
display: block;
}
Contenedor max-width centrado
Las líneas largas cansan la vista. Envuelve la columna legible en un contenedor con max-width y margin horizontal auto.
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Básicos de la barra del header
Un header suele abarcar el contenedor o todo el ancho. Mantén el padding coherente y deja el estilo profundo de nav para la siguiente lección.
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}
Un boceto simple de dos columnas
Hasta las lecciones de Flexbox/Grid, un boceto calmado con float puede mostrar main + aside. Prefiere aprender Flex/Grid después para columnas reales de página — esto es un puente, no el plan eterno.
.layout {
display: flow-root;
}
.layout__main {
float: left;
width: 68%;
}
.layout__aside {
float: right;
width: 28%;
}
Pie debajo de la historia
Tras columnas con float, limpia el footer para que caiga bajo ambas. Más adelante Flex/Grid contendrá columnas sin hábitos de clearfix float.
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
Un hábito de layout calmado
Landmarks primero, contenedor segundo, espaciado tercero. Usa float solo como boceto temporal de columnas. En los módulos siguientes ve a Flexbox y Grid para estructura durable — no pilas absolute ni grids float eternos.
.page {
min-height: 100vh;
}
.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }
Pruébalo tú mismo
- Construye una carcasa landmark: header, nav, main, aside, footer.
- Envuelve el contenido en un
.containercon max-width y márgenes centrados. - Estiliza una barra de header simple con padding y borde inferior.
- Boceta main + aside con anchos float, luego limpia el footer.
- Escribe una frase: ¿por qué Flex/Grid sustituirá este boceto float más adelante?
Errores comunes
- Posicionar en absolute cada columna de la página
- Dejar el texto a todo el ancho del viewport sin max-width
- Saltar landmarks semánticos por montones de div anónimos
- Tratar esta lección como object-fit (marcos de medios, no regiones de página)
- Enviar grids float eternos en vez de aprender Flex/Grid a continuación
Resumen
- El diseño de sitio trata de regiones de página que comparten una pantalla
- Usa landmarks semánticos más un contenedor max-width centrado
- Un boceto float main/aside puede ilustrar columnas brevemente
- Limpia footers bajo floats; pronto prefiere Flex/Grid para la estructura
- Layout ≠ object-fit — regiones frente a encajar medios en una caja
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior