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

Flotar y acomodar un DIV

Tags: margen, capas, div, maquetacion, html, css, manual
publicado el 2010-06-02   leido 3878 leídas

La maquetación por divs CSS se basa en "flotar" unas capas dentro de otras para conseguir la estructura que queremos, para esto se utiliza la propiedad float.

Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los siguientes valores:
  • none: no flota la capa.
  • left: flota la capa hacia la izquierda.
  • right: flota la capa hacia la derecha.

Siguiendo con el ejemplo de la lección anterior, vamos a crear otra capa #capa2, le vamos a aplicar otro color de fondo con el mismo alto y ancho pero vamos a flotar ambas capas hacia la izquierda, quedaría así:
#capa1{
    width:210px;
    height:300px;
    background-color:green;
    float:left;
}
#capa2{
    width:210px;
    height:300px;
    background-color:gray;
    float:left;
}
y el código HTML sería este:
<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>
</body>
</html>
Nota: asegurate de escribir bien los ID, tanto en la hoja de estilos como en el código HTML, que coincidan en ambos, de lo contrario no funcionará.

esto se debería ver mas o menos así:
 

Ahora, ¿que pasa si aplicamos un margen izquierdo a la capa2?
#capa2{
    width:210px;
    height:300px;
    background-color:gray;
    float:left;
    margin-left:10px;
}
se vería así:
 


Te gust?

Nuestro primer div

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

 
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