44 - Disposición de 2 columnas (propiedad float)
Problema:
Crear una página con dos columnas. La primera flotarla a la izquierda con 200 píxeles de ancho.
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"> Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1. </div> <div id="columna2"> Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2. </div> </body> </html>
* { margin:0; padding:0; } #columna1 { float:left; width:200px; background-color:#ff5; border:1px solid #555; } #columna2 { margin-left:210px; background-color:#ffb; border:1px solid #555; }
No tiene disponible el navegador la capacidad de iframe
Retornar