Como hacer una pagina web y ganar dinero
Creada para aprender lo que mas nesesitas porque la calidad es mejor que la cantidad.
Blog

Evitar que un DIV se ponga a los Lados con CSS Clear

Tags: maquetacion, css, div, capa, formato, clear
publicado el 2010-06-02   leido 2932 leídas

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:



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í:


Ya estamos listos para maquetar un sitio, ahora puedes pasar al siguiente nivel:

Manual de Maquetación con CSS


Te gust?

Flotar y acomodar un DIV

¿Cómo subir una pagina Web a Internet?

 
Información
Christian Valencia publicado porPor: Ero-Fierce

Suscribete
Recibe los ultimos articulos en tu email:


Ultimos Artculos
Hacer SEO en el 2016 - 2017
Habilitar sonido al pulsar las teclas Bloq Mayús, Bloq Num y Bloq Des
10 trucos viejos, seo que nunca te dijeron
15 Efectos carrusel como pagina de libro animado con ejemplos
No se pudo generar una instancia de usuario de SQL Server debido a un error (.mdf
Solucion Error 26. No se encontró el servidor o éste no estaba accesible. Sql

Todos los tutoriales

Hacer una web paso a paso Php y MySQL Javascript
Posicionamiento Web SEO Cómo ganar dinero con tu web Herramientas y Programas Web
Maquetación con CSS Hosting y Dominios MySQL y Phpmyadmin
Ajax UML: Analisis y Diseño Programacion Orientada a Objetos
Java
 
Copyright © 2009 - pagina Web 2 - Todos los derechos Reservados