Estructuras con divs flotantes y posición

[d3xf4ult]

Hola a tod@s.

1º) Quería saber como influyen las herencias de los div id o div class sobre otros divs id o div class, así como los span class.

2º) Y otra pregunta:
Si tengo una estructura html similar a:

Código:

<div id="principal">
    <div id="dos">
        <div id="tres">
        </div>
    </div>
</div>
<div id="cuatro">
</div>

Quería saber como influyen las propiedades float y positión con sus respectivos valores:
El ejemplo le continuaría en CSS de este modo:

Código:

#principal {
width:1000px;
height:200px;
}
#dos {
width:500px;
height:300px;
float:left;
position:relative;
}
#tres {
width:500px;
height:300px;
float:right;
position:relative;
}
#cuatro {
width:1000px;
height:70px;
}

Y lo que pasa, es que los divs "dos" y "tres", al incorporar texto o demás. se superponen encima del div "cuatro".
Quería saber alguna forma para que no pase esto y se ajuste a cada div colocado, de modo que al añadir o quitar contenido siempre se ajuste y no se solape por encima unas capas y otras.
Por eso pregunto las razones de las propiedades float y position que creo que influen en todo esto y también las herencias de divs padres e hijos

[cristian_cena]

Iniciado por d3xf4ult

1º) Quería saber como influyen las herencias de los div id o div class sobre otros divs id o div class, así como los span class.

Que uses class o id no influye en la cascada de estilos, son dos formas distintas de acceder a un elemento, solo eso.

Lo que si debemos tener en cuenta es con que tipo de caja trabajamos: las hay de linea, de bloque y inline-block.

por ejemplo: div es de bloque y span es de linea.
Entonces esto es correcto: <div><span></span></div>
Pero anidar un elemento de bloque dentro de un elemento de línea no es correcto y no pasará el w3c validator: <span><div></div></span>

Aunque en cualquier caso puedes convertir un elemento de linea a bloque o viceversa usando la propiedad display.

Ejemplo:
display:inline; //convierte una caja en caja de linea
display:block; //convierte una caja en caja de bloque

La propiedad inline-block es un tanto más avanzada, acá la explican.

Iniciado por d3xf4ult

Y lo que pasa, es que los divs "dos" y "tres", al incorporar texto o demás. se superponen encima del div "cuatro".

debes trabajarla con la propiedad z-index. La cual implica dos cuestiones:

1. que estructures correctamente el html con un contenedor y elementos hermanos en su interior.
2. que posiciones correctamente las capas que intervienen en el apilamiento.

Acá un artículo.

Iniciado por d3xf4ult

Por eso pregunto las razones de las propiedades float y position que creo que influen en todo esto y también las herencias de divs padres e hijos

Lo correcto es trabajar con contenedores e hijos flotados. Ya que el contenedor te servirá para limpiar el flotado. Es decir, para que no te ocurra de que se te apilen las cajas misteriosamente, ya que este contenedor tomará la altura de su hijo flotado más alto. Aquí un ejemplo funcionando.

Finalmente, float hace que la capa salga del flujo normal del documento, al igual que cuando usas position absolute o fixed. Por esto es que debes usar un contenedor para las cajas flotadas. Y por esto también es que debes usar un contenedor para las cajas posicionadas en absoluto, ya que estas buscarán su ancestro inmediato relativo o body para posicionarse.Sobre este tema te podes documentar acá.

Espero esta info te sea útil.

Saludos.

[d3xf4ult]

Muchas gracias. Me están quedando claros ciertos conceptos.
Y por último. A modo ejemplo.

Como implementaría esto, con divs? y que se me ajustará todo perfectamente, si voy añadiendo contenido a los bloques hermanos, y que se ajusten según su contenido, por que por más que lo intento no doy conseguido el resultado deseado. Gracias.
[URL="http://imageshack.us/photo/my-images/692/ejemplo1s.jpg/"][B]http://imageshack.us/photo/my-images/692/ejemplo1s.jpg/[/B][/URL]

[cristian_cena]

si, implementalo con divs, porque generalmente se usan divs para armar el layout, ya que como span (digamos su equivalente, pero de línea) no tienen carga semantica.
Pero trata de evitar esto.
Saludos.

[d3xf4ult]

El efecto a conseguir sería como ya dije este:
http://imageshack.us/photo/my-images/692/ejemplo1s.jpg
Y el código implatado HTML, este:

Código:

<div id="todo-container">
		<div id="primer-container">
		
			<div id="bloque1">
				...contenido..
			</div>
			<div id="bloque2">
				...contenido..
			</div>
		</div>
		
		<div id="sengundo-container">
			...contenido..
		</div>
		
		<div id="tercer-container">
			<div id="bloque3">
				...contenido..
			</div>
			<div id="bloque4">
				...contenido..
			</div>
		</div>
	</div>

Quería saber ahora cuales serían los selectores, propiedades y valores adecuados, para que se vaya ajustando el contenido de los mismos según se añada o elimine el contenido.

Nosé si puede ser esto una "div mania"

[cristian_cena]

asi como lo tienes está bien, con los links que te pasé podes resolverlo. yo no te lo hago porque no te sirve, mas vale probá y si te equivocas en algo volves a preguntar que alguien seguro te va a responder.

La div manía hace referencia a que no uses div para todo, por ejemplo para un título ya que para esto existe h1-h6 lo que aporta semántica al contenido.

Saludos.

[vgonga1986]

La div-manía se te pasa cuando tienes que modelar el código HTML que ha hecho otra persona y no lo puedes tocar, porque cuando es tu propio HTML lo puedes modificar a antojo y no te comes la cabeza, si no tienes elementos suficientes, añades un div, pero cuando no puedes hacer eso, ahí si te rompes los sesos para buscar lo que quieres con lo que tienes. Luego es cuestión de práctica.