Esto pasa lamentablemente muy seguido, y es importante saber el por qué. Si estás empezando a crear tus propias plantillas es mejor que lo manejes y sepas como enfrentante a este error que te hará perder demasiado tiempo y paciencia.
Para que se entienda mejor el error basta con observar el siguiente ejemplo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra.
Como es posible apreciar, cada contenedor está alineado hacia una dirección, pero esto afecta al que se los incluye (No se respeta el alto del contenido). Además, algo que no se puede percibir es que deforma el contenido externo también, lo que se encuentra debajo del contenedor también se verá afectado, yo lo corregí parcialmente para que no me deformara la entrada, pero básicamente ese es todo el error.
¿Cómo corregir este problema?
Para ello usaremos el atributo clear, el cual nos permite corregir cada elemento y evitar que se sobrepongan unos de otros.
Observemos el código fuente:
<div id="contenedor-general-ejemplo">
<div class="elemento-izquierda">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl.
Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing
pharetra.
</div>
<div class="elemento-derecha">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl.
Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing
pharetra.
</div>
</div>
Ahora su hoja de estilos:
#contenedor-general-ejemplo {
width:80%;
background:#222;
padding:10px;
margin:0 auto;
}
.elemento-izquierda {
background:orange;
color:white;
width:40%;
float:left;
padding:5px;
}
.elemento-derecha {
background:#be4545;
color:white;
width:40%;
padding:5px;
float:right;
}
No hay ningún problema, todo está correctamente atribuído, pero el error siempre estará.
El elemento clear es un atributo que se encarga de despejar un elemento con flotación, se utiliza un contenedor con este elemento y se asigna en la parte inferior dentro del que queremos corregir, es decir:
<div id="contenedor-general-ejemplo">Ahora veamos cómo se comporta:
<div class="elemento-izquierda">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl.
Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing
pharetra.
</div>
<div class="elemento-derecha">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl.
Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing
pharetra.
</div><div style="clear:both;" /></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra.
El clear se añade a un elemento extra, NO a los contenedores que existen. Lo que hace el clear:both es hacer que esa capa tenga un despejamiento y el contenedor general podrá detectarlo.
¿Cómo insertarlo?
En el ejemplo mostré una sóla forma, pero puedes hacerlo de 2 formas (Obviando el atributo con javascript):
Método 1: Creando la clase "clear":
Este método consiste en crear una class llamada .clear, y a esta deberás aplicarle el atributo clear:both, para ello hazlo de la siguiente forma:
.clear {clear:both;}Ahora para usar un clear, lo haces de la siguiente forma:
<div class="clear" />Nota: El primer código va antes de ]]></b:skin>
Método 2: Usando un div con la tag style:
Este método es igual de sencillo que el anterior, pero para los que les sea mas cómodo usar los atributos dentro del div puede ser mas útil:
<div style="clear:both;" />
No hay comentarios:
Publicar un comentario