46 - Disposición de 3 columnas, cabecera y pie.
Problema:
Crear una página con tres columnas, cabecera y pie de página.
pagina.html
estilos.css
Ejecución de la página
<!DOCTYPE html> <html> <head> <title>Problema</title> <meta charset="UTF-8"> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Aca el título de la página</h1> </div> <div id="columna1"> <p>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 id="columna3"> <p>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="columna2"> <h2>Título de la columna</h2> <p>Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2.</p> </div> <div id="pie"> Pié de página. </div> </div> </body> </html>
* { margin:0; padding:0; } #contenedor { width:100%; border:1px solid #000; line-height:130%; background-color:#f2f2f2; } #cabecera { padding:10px; color:#fff; background-color:#becdfe; clear:left; } #columna1 { float:left; width:200px; margin:0; padding:1rem; } #columna2 { margin-left:210px; margin-right:230px; border-left:1px solid #aaa; border-right:1px solid #aaa; padding:1rem; } #columna3 { float:right; width:200px; margin:0; padding:1rem; } #pie { padding:10px; color:#fff; background-color:#becdfe; clear:left; }
No tiene disponible el navegador la capacidad de iframe
Retornar