seguinte »

[LusaDigital]

Neste Post vou demonstrar como é possível formatar um documento sem usar o recurso a tabelas. Com este exemplo podemos ter um código mais simples e mais leve.

Formatando Estilos:

Código:

[color=green]<style type="text/css">

/* CRIA A DIVE PRINCIPAL */
.divMestre {
width:150px;
height:40px;
}


/*DIV AZUL*/
.div1{
background:#0000CC;
float:left;
width:40px;
height:40px;
margin-left:10px;
}

/*DIV VERMELHA */
.div2{
background:#FF0000;
float:left;
width:40px;
height:40px;
margin-left:10px;
}

/*DIV VERDE */
.div3{
background:#00FF00;
float:left;
width:40px;
height:40px;
margin-left:10px;
}

/* LIMPA O FLOAT */
.clear{
clear:left;
}

</style>[/color]

background:  - Define o fundo da div
float              - possibilita que a div fique alinhada a esquerda ou a direita
width            - define largura
height           - define altura
margin-left    - define a margem esquerda
clear             - Limpa o efeito fload


Definindo o código HTML:

Código:

[color=green]<div class="divMestre">

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
   
<div class="clear"></div>
</div>[/color]

Ver o exemplo como fica:



Espero ter sido Útil