Alinhando dois objetos

Aprenda a alinhar dois objetos um lado ao outro.

Por | @nmuller99 Programação
Olá Pessoal.

Está é minha primeira coluna como colunista Tableless. Nesta coluna vamos aprender a alinhar objetos um ao lado do outro com a propriedade float:left

Bom uma demonstração do que iremos fazer, abaixo na imagem:
Alinhando dois objetos

Bom vamos ao código:
//Código do CSS
.obj_1 { width:150px; height:300px; float:left; background-color:#666666; color:#FFFFFF  }
.obj_2 { width:150px; height:300px; float:left; background-color:#FFFFFF; color:#666666  }


O que faz o código:
Ele faz com que alinhe dois objetos com as classes .obj_1 e .obj_2.
OBS.: Lembrando que a propriedade float deve sempre ser seguida de uma largura, ou seja, você não consiguira uma boa usabilidade da propriedade se não possuir uma largura no objeto que deseja.

Após isto feito é hora de ir para o código html.





Documento CSS



OBJETO 1

OBJETO 2

Pode ser utilizado com a tag também:
OBJETO 1
OBJETO 2




A diferença entre a tag span e a tag div é que a tag div tem a característica de ser "Break Line", ou seja, tem a propriedade de quebra de linha, enquanto a tag span não.


Bom pessoal acho que inicialmente era isso, até a próxima coluna. ;)
Mais informações sobre CSS, vejam em nossa área de css pelo link: target="_blank">http://www.oficinadanet.com.br/index.php?acao=area&area=CSS

Mais sobre:
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários