Tema: Problema con divs y margin
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/12/2015, 15:53
Avatar de BramSt
BramSt
 
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 9 años
Puntos: 5
Problema con divs y margin
Hola a todos.

Estaba haciendo un ejercicio para clase, que consiste en hacer algo tal que así:





Y la hoja CSS para conseguirlo es la siguiente:
Código CSS: 
Ver original
  1. #contenedor
  2. {
  3.  
  4. background-color:aqua;
  5.  
  6. width:700px;
  7.  
  8. border:1px solid aqua; 
  9. }
  10.  
  11. #cabecera
  12. {
  13.  
  14. background-color:red;
  15.  
  16. margin:20px;
  17.  
  18.  
  19. }
  20.  
  21. #menu
  22. {
  23.  
  24. background-color:green;
  25. width:150px;
  26. float:left;
  27. margin:20px;
  28. height:250px;
  29.  
  30. }
  31.  
  32. #contenidos
  33. {
  34.  
  35.  
  36. background-color:yellow;
  37. width:470px;
  38. float:left;
  39. height:500px;
  40. margin:20px;
  41.  
  42.  
  43. }
  44.  
  45. #pie
  46. {
  47.  
  48. clear:both;
  49. background-color:violet;
  50. margin:20px;
  51. }

Y el html:

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>
  4.         </title>
  5.         <link rel="stylesheet" type="text/css" href="Estilos.css"/>
  6.         
  7.     </head>
  8.     <body>
  9.     
  10.         
  11.         <div id="contenedor">
  12.         
  13.             <div id="cabecera">cabecera</div>
  14.             <div id="menu">menu</div>
  15.             <div id="contenidos">contenidos</div>
  16.             <div id="pie">pie</div>
  17.         
  18.         </div>
  19.         
  20.     </body>
  21. </html>

Bueno, el problema es que me ha salido bien casi por suerte, probando a tientas, porque no entiendo por qué he tenido que ponerle un borde al div contenedor para que se muestren los margin-top de la cabecera y el margin-bottom del pie de página. Es decir, si no pongo el borde, queda así:





¿Alguien puede explicarme por qué?

Muchas gracias.