Flotar y acomodar un DIV
Por: Lucas Muñoz¿Para que sirve la propiedad FLOAT en CSS? Aquí veremos para que sirve y cuales son sus atributos y usos prácticos.
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í:
para ver el ejemplo en tu navegador hace clic acá.
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í:
para ver el ejemplo hace clic acá.
- ¿Cómo hago para añadir una imagen a mi página con HTML?
- Como posiciono mi pagina web? ayuda por favor
- JQuery o Mootools? ayudenme a elegir
- tengo mi pagina y se me borro el public html como lo regreso a l puesto donde era
- como consigo un html
- con embed se oye solo en chrome y en ie, hay otro código, bgsound no gracias
- como se hace lengujehtml y se pegando imagenes
- como hago para colocar un enlace a mi pagina web
- por que mi firefox mosilla no agarra bgsound y tampoco embed?
- Como poner 2 imagenes pero que solo se muestre una y que alla un boton para cambiar a la otra
- deseo crear una pagina esoterica y ganar por visitas "como lo hago"
- buenos dias, en la segund aparte te coloco la preguntita
Imprimir
Enviar por email
Favoritos
Tamaño de fuente
