Imagens Lado a Lado, Fazer Colunas nos Gadgets

Algumas pessoas que visitam nosso blog perguntaram sobre como colocar imagens uma ao lado da outra como fizemos com os links para nossa comunidade no Orkut, Facebook e Vídeos do Youtube que temos em nosso menu. Existem varias maneira de fazer aquilo usando códigos CSS ou tabelas em HTML(que já mostramos em outra postagem: Dividir um gadget em duas colunas), mas preferimos mostrar como fazer utilizando as divs.

Naturalmente estamos falando de gadgets de html/javascript onde podemos colocar códigos diretamente dentro deles, se quiser colocar gadgets ao lado do título do seu blog veja aqui:Como dividir o cabeçalho do blog em duas partes.

Voltando ao assunto colocar as imagens ou textos lado a lado no gadget use o seguinte código:

<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
</center>

O valor 33 é utilizado porque são 3 colunas se usar outra quantidade e altere esse valor para que a soma seja algo próximo de 100 mas sem ultrapassar, por exemplo para duas colunas poderiamos usar 49 em cada uma delas.

Se depois de utilizar as 3 colunas quiser voltar a fazer uma coluna só acrescente essa linha no final <div style="clear:both">conteudo aqui</div>, ficando deste jeito:

<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="clear:both">conteudo aqui</div>
</center>