Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 06 de Marzo 2017, 23:34

Título: HTML y CSS Crear un Diseño con columnas para una página web CU01036D
Publicado por: alefaletti en 06 de Marzo 2017, 23:34
Queridos; les paso el código del ejercicio CU01036D del curso de programación web con CSS.

(si alguien logra que el mismo no se "rompa" al achicar el navegador, le agradezco me diga como hace. Muchas gracias.

HTML

Código: [Seleccionar]

<html>

<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS(37)-Float-Clear-Columnas.css">
</head>

<body>

<div id="cabecera"> Cabecera </div>
<div id="columna1"> Columna izquierda </div>
<div id="centro"> Espacio central </div>
<div id="derecho"> Espacio derecho </div>

</body>

</html>


CSS

Código: [Seleccionar]

div {border-style:solid; text-align:center;}
#cabecera   {border-color:red; width:99.68%;}
#columna1   {border-color:blue; float:left; width:20.50%; height:100px; margin-top:5px;}
#centro     {border-color:green; float:left; height:100px; width:57.75%; margin: 5 1 0 1px;}
#derecho    {border-color:orange; float:right; height:100px; margin-top:5px; width:20.50%;}

Título: Re:HTML y CSS Crear un Diseño con columnas para una página web CU01036D
Publicado por: Alex Rodríguez en 14 de Mayo 2017, 14:20
Hola alefaletti, en el navegador donde lo he probado no se ve bien (el espacio derecho se ve desplazado debajo). Mira estos enlaces donde hay algunas explicaciones sobre este ejercicio:

https://www.aprenderaprogramar.com/foros/index.php?topic=1647.0

https://www.aprenderaprogramar.com/foros/index.php?topic=3862.0

Saludos