Explicación lógica?

C

Cacharrin

Lanero Reconocido
1 Jun 2007
1,770
Hola amigos de Laneros

Otra vez vengo yo con mis dudas existenciales con CSS

Resulta que necesitaba hacer una mini-maquetación de una página suuuuper sencilla...

Y me encontré con el siguiente problema (Adjunto un pequeño archivo para el que lo quiera ver):

Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<style>
body{
margin: 0;
padding: 0;
}

.container{
float: left;
width: 520px;
height: 1200px;
background: url("back.jpg");
}

.comments{
margin: 911px 21px 0 27px;
height: 265px;
width: 472px;
}
</style>
</head>

<body>
<div class="container">
	<div class="comments">
		Porque esta malo?
	</div>
</div>
</body>

</html>

Resulta que solo tengo el DIV "container" y el DIV "comments"... y pasa y acontece que NO ENTIENDO porque si remuevo el DIV comments, la pagina se ve bien... si pongo el DIV comments, se me descuadra el div container...
es esto lógico? porque al agregar un hijo se va a descuadrar el padre?

Ya encontré varias formas de hacerlo distinto pero que se vea igual...

Pero otra vez quiero saber si alguién tiene una respuesta lógica a este comportamiento? (no una solución para arreglarlo, sino una explicación de porque algo que debería funcionar no funciona)

Thanks :)
 

Archivos adjuntos

  • error.rar
    6.3 KB · Visitas: 135
Baje tu archivo y cuando lo abri no me aparecia nada, mirando el codigo le agregue un float: left a .comments:

.comments{
margin: 911px 21px 0 27px;
height: 265px;
width: 472px;
float: left;
}

Pruebalo a ver si e slo que necesitas...
 
Hola... muchas gracias por la respuesta...

Aunque creo que no leiste bien jejeje...

Si, de hecho el CSS como está no funciona (Aunque en teoría debería funcionar)... lo que yo estaba preguntando era el motivo por el cual como está no funciona, pues a mi la lógica me dice que debería funcionar bien.

Por ejemplo, sábes tu la razón por la cual al colocar ese float: left, hace que todo funcione bien y al no tenerlo funcione mal? que está mal en el css si no se usa ese float:left?
 
Pues mira que la respuesta no la se... pero si se que ese float me ha servido en estos casos.

Seria bueno que alguien que sepa la respuesta nos ayudase con esto ;)
 
Interesante el tema. Conozco muy poco de CSS pero esto fue lo que encontré.

En primera instancia voy a mostrar el esquema de la página que usted tiene en mente y de una vez miramos unas cosas.

4xJwB.jpg


El Div Container tiene una margen que no se nota pero que igual existe en cada uno de los lados de ese Div.

A su vez el Div Comments tiene una margen de 911px que va desde el inicio del Div Container hasta el inicio del Div Comments. Hasta el momento todo normal.

Como puede ver, en el dibujo señalo un punto de intersección de las 2 margenes. Ahí se encuentran las margenes de ambos Divs una debajo de la otra.

En ese momento sucede algo que se llama "Collapsing Margins" que sucede cuando ambas margenes no tienen separación. Las dos margenes se fusionan, se convierten en una con el mayor valor de las dos y pasa a ser la margen del padre. En este caso Div Container pasa a tener una margen de 911px y Div Comments se queda sin margen y por eso sube como se muestra en el siguiente dibujo.

oUXl4.jpg


La solución es poner una separación entre ambas margenes y en este caso una solución sencilla e invisible es darle un Padding de 1px (Amarillo en la imagen) a Div Container. De esta manera la margen del Div Comments no llega a tocar la margen del Div Container porque tiene de por medio el Padding que impide que ambas margenes se fusionen.

K0s6R.jpg


Repito. No conozco mucho del tema, puede que tenga errores en la explicación o que no esté siendo 100% correcto por lo que puede leer mas del tema buscando en Google y viendo otros ejemplos para que entienda mejor la situación.
 
Oh genial !!!

Muchas gracias Oesoto una explicación así era la que buscaba, no conocía ese "collapsing margins".

Ahora ya todo me queda mas claro!

Excelente!

Muchas gracias! :)
 
Con gusto :) Ahí vamos aprendiendo todos.

Dejo otro código sencillo donde también se ve el efecto

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<style>
	body{
		padding: 0;
		background-color:#F63;
	}
	
	h1{
		background-color:#00FFFF;
		margin:0px;
	}
	
	div{
		margin-top:40px;
		background-color:#99CC99;
		/*border-top: 1px solid #000;*/
	}
	
	p{
		margin-top:80px;
		}

</style>
</head>
<body>
    <h1>Heading Content</h1>
    <div>
      <p>Paragraph content</p>
    </div>
</body>
</html>

Notese como los 80px de margen del parrafo nunca se aplican si no que se aplican como margen del Div. Al activar la regla Border-top en el Div las margenes del Div y el P dejan de tocarse (colapsar) y todo vuelve a la normalidad.
 

Los últimos mensajes

Los últimos temas

Arriba Pie
Atrás