[SOLUCIONADO] Duda muy básica con div y css

dehm · #1 (**permalink**) 28/04/2014, 10:39

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<!DOCTYPE html>
<head>
    <title>Pruebas borrar</title>
    <link rel="stylesheet" type="text/css" href="./borrar.css" media="screen" />
</head>
<body>
    <div>Cabecera</div>
    <div>Cuerpo</div>
    <div>Pie</div>  
</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<!DOCTYPE html>
<head>
    <title>Pruebas borrar</title>
    <link rel="stylesheet" type="text/css" href="./borrar.css" media="screen" />
</head>
<body>
    <div>Cabecera
        <div>Izquierda</div>
        <div>Derecha</div>
    </div>
    <div>Cuerpo</div>
    <div>Pie
        <div>Uno</div>
        <div>Dos</div>
        <div>Tres</div>
        <div>Cuatro</div>
    </div>  
</body>

Mi CSS:

Código CSS:

Ver originaldiv div
{
    float:  left;
}

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<!DOCTYPE html>
<head>
    <title>Pruebas borrar</title>
    <link rel="stylesheet" type="text/css" href="./borrar.css" media="screen" />
</head>
<body>
    <div>
        <div>Izquierda</div>
        <div>Derecha</div>
    </div>
    <div>Cuerpo</div>
    <div>Pie
        <div>Uno</div>
        <div>Dos</div>
        <div>Tres</div>
        <div>Cuatro</div>
    </div>  
</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é

C2am · #2 (**permalink**) 28/04/2014, 10:59

www.librosweb.es
http://librosweb.es/css/

No alcanzo a apreciar cual es el problema, ya que el código es exactamente el mismo.

Sobre elementos flotados, debes considerar de evitar que el padre (caja que contiene a los div flotados) pierda su altura. Esto se debe a que los elementos flotados salen del flujo normal del documento y el padre ni se entera que tiene hijos :( .
Mejor lee: http://librosweb.es/css_avanzado/cap...ar_floats.html

En vez de flotados puedes usar, como alternativa: display:inline-block.

En el manual encontraras las mayoría de las respuestas a las preguntas que surgen al iniciar con css.

Aquí también, por supuesto, pero siempre es mejor primero leer el manual de uso.

Saludos

dehm · #3 (**permalink**) 28/04/2014, 11:13

Hola:

Muchas gracias por responder. La explicación del por qué de los elementos flotados me ha sacado de la duda.
La cosa es que estoy siguiendo precisamente los tutoriales de librosweb, pero he de darle un repaso más en condiciones.

Por aclarar un poco, la diferencia entre el 2º y 3º código html, es que en el 2º, el div no contiene sólamente otros div, sino también un texto, y gracias a él la cosa funciona como yo quería que funcionase, pero en el 3º sólo tengo un div contenedor de otros div, y en ese caso no me funciona, pero la explicación del comportamiento del float me ha dado la solución al por qué.

Muchas gracias!

Linton · #4 (**permalink**) 28/04/2014, 11:48

Cita:

Iniciado por C2am

...los elementos flotados salen del flujo normal del documento y el padre ni se entera que tiene hijos...

Muy gráfico.