InicioCrear web desde cero › Flotar y acomodar un DIV

Flotar y acomodar un DIV

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

Ejemplo 3 - Float

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

Ejemplo 5


para ver el ejemplo hace clic acá.
 

Siguiente lección: propiedad CSS Clear