Tema: Duda muy básica con div y css
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/04/2014, 10:39
dehm
 
Fecha de Ingreso: septiembre-2010
Mensajes: 494
Antigüedad: 13 años, 7 meses
Puntos: 10
Duda muy básica con div y css
Hola:

Estoy intentando hacer varias pruebas con div, para ver si entiendo cómo funcionan, pero se ve que no llego tan lejos...

Mi intento:

1ª Aproximación: Dividir una página en 3 bloques. Por ahora vamos bien.....mas bien porque no he de hacer nada :D
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <head>
  3.     <title>Pruebas borrar</title>
  4.     <link rel="stylesheet" type="text/css" href="./borrar.css" media="screen" />
  5. </head>
  6. <body>
  7.     <div>Cabecera</div>
  8.     <div>Cuerpo</div>
  9.     <div>Pie</div>  
  10. </body>

2ª Aproximación: Dado el exitazo de la 1ª prueba, ahora me dispongo a intentar que el div que contiene la cabecera quede dividido en 2 bloques en línea, e igualmente el pie en 4 bloques en línea (vamos, por poner algo, la cosa es dividir cada div en otros div que estén en línea:

Mi HTML:
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <head>
  3.     <title>Pruebas borrar</title>
  4.     <link rel="stylesheet" type="text/css" href="./borrar.css" media="screen" />
  5. </head>
  6. <body>
  7.     <div>Cabecera
  8.         <div>Izquierda</div>
  9.         <div>Derecha</div>
  10.     </div>
  11.     <div>Cuerpo</div>
  12.     <div>Pie
  13.         <div>Uno</div>
  14.         <div>Dos</div>
  15.         <div>Tres</div>
  16.         <div>Cuatro</div>
  17.     </div>  
  18. </body>

Mi CSS:
Código CSS: 
Ver original
  1. div div
  2. {
  3.     float:  left;
  4. }

Bueno, esto parece funcionar....pero ahora si le quito el texto al div de cabecera, es decir, si hago así, ya no me funciona:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <head>
  3.     <title>Pruebas borrar</title>
  4.     <link rel="stylesheet" type="text/css" href="./borrar.css" media="screen" />
  5. </head>
  6. <body>
  7.     <div>
  8.         <div>Izquierda</div>
  9.         <div>Derecha</div>
  10.     </div>
  11.     <div>Cuerpo</div>
  12.     <div>Pie
  13.         <div>Uno</div>
  14.         <div>Dos</div>
  15.         <div>Tres</div>
  16.         <div>Cuatro</div>
  17.     </div>  
  18. </body>

Ya en un tono más serio, realmente me causa desazón no entender cómo funciona realmente el CSS, o no saber qué estoy haciendo mal. Vamos, que por qué no funcionan las cosas como creo que deberían funcionar.
Así que si alguien me da algo de luz en algo tan básico, se lo agradeceré