Tema: separación uniforme entre todos los divs
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 13/01/2012, 04:42
Avatar de navarone86
navarone86
 
Fecha de Ingreso: octubre-2009
Mensajes: 62
Antigüedad: 15 años, 1 mes
Puntos: 2
Respuesta: separación uniforme entre todos los divs
muchísimas gracias por responder, creo que he conseguido lo que quería (aunque dejando de lado la idea de usar un único class)

el resultado es este, aunque hay cosas que no entiendo:

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


Código CSS: 
Ver original
  1. #cabecera{
  2.     height: 80px;
  3.     background-color: green;
  4. }
  5.  
  6. #menu{
  7.     float: left;
  8.     height: 80px;
  9.     width: 15%;
  10.     background-color: yellow;
  11.     margin: 1% 1% 0 0
  12. }
  13.  
  14. #botones{
  15.     height: 40px;
  16.     width: 84%;
  17.     float: left;
  18.     background-color: red;
  19.     margin: 1% 0 0 0
  20. }
  21.  
  22. #contenido{
  23.     height: 80px;
  24.     width: 84%;
  25.     float: left;
  26.     background-color: blue;
  27.     position:relative;
  28.     margin: 1% 0 0 0
  29. }
  30.  
  31. body{
  32.     margin: 1%;
  33. }

si el margin del body me mete 1% a la izquierda y a la derecha, ya tengo 2
si el menu tiene 15% de ancho, tengo 17
más el 1% entre menu y contenido, 18

como es posible que para que todo encaje perfectamente, tenga que poner 84% a contenido?

PD: no conocía esa web, muy útil, gracias de nuevo ;)