Evitar que un DIV o capa se superponga con otra
Inicio > Crear web desde cero > Evitar que un DIV o capa se superponga con otra

Evitar que un DIV o capa se superponga con otra

Por: Lucas Muñoz
Recomendar lección:

¿Para que sirve la propiedad CLEAR en CSS? Aquí veremos para que sirve y cuales son sus atributos y usos prácticos.

Seguramente cuando estes maquetando tu sitio web necesitarás tener una capa o bloque que no tenga capas a su/s lados, para eso esta la propiedad CSS Clear.

Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa se posicione a cualquiera de los lados, los valores que admite son estos:
 

  • left: no deja que una capa flote a la izquierda
  • right: evita que una capa flote a la derecha
  • both: evita que haya capas flotantes en cualquiera de sus lados


Nosotros lo usaremos para crear, por ejemplo, el pie de pagina.

Siguiendo con el ejemplo que hicimos en la lección anterior vamos a crear una tercer capa #capa3 y le aplicaremos esta propiedad, añadiremos un ancho de 430 pixeles y un alto de 30 pixeles, también le aplicaremos un color de fondo naranja.

#capa3{
    width:430px;
    height:30px;
    background-color:orange;
    float:left;
    clear:both;
}

el código HTML quedaría así:

<html>
    <head>
        <title>Curso de maquetacion CSS</title>
        <link href="estilos.css" type="text/css" rel="stylesheet">
    </head>
<body>
    <div id="capa1">¡Esta es mi primer capa!</div>
    <div id="capa2">¡Esta es mi segunda capa!</div>
    <div id="capa3">¡Esta es mi tercer capa!</div>
</body>
</html>

Esto dará como resultado algo parecido a esto:
 

Ejemplo 6

Ver ejemplo.

Ahora vamos a agregar un margen superios para separa un poco el pie de pagina (#capa3) de las demas capas o divs.

#capa3{
    width:430px;
    height:30px;
    background-color:orange;
    float:left;
    clear:both;
    margin-top:10px;
}

Esto quedaría así:
 

Ejemplo 7


Podes ver este ejemplo haciendo clic acá.

Ya estamos listos para maquetar un sitio, en la siguiente lección maquetaremos un sitio de pruebas integramente con divs, ansios@? jeje
 

¿Te quedaron dudas de esta lección? Unete a la Comunidad de Webmasters y haz tu pregunta, entre todos te ayudaremos.
Preguntas de otros usuarios en la comunidad

Curso: Crear web desde cero

Lecciones relacionadas