40 - Disposición de 2 columnas (position: absolute)
Problema:
Crear una página con dos columnas utilizando posicionamiento abosoluto.
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="columna1"> Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. </div> <div id="columna2"> Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. </div> </body> </html>
* { margin:0px; padding:0px; } #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; }
No tiene disponible el navegador la capacidad de iframe
Retornar