[Resolvido] 3 colunas em <div>

[7ohmz 0]

Pessoal,

 

Sou novato em CSS e estou com dificuldade em conseguir posicionar 3 colunas em <div> dentro de uma <div> central.

 

Meu layout é assím:

 

<div id="topo">

<div id="centro">

<div id="rodape>

 

Como posiciono 3 colunas de 333px de largura (na div central),lado a lado via CSS? Estou um pouco atrapalhado com as propriedades float e clear e não entendo como funcionam.

[marcus_du 1]

Deixa eu ver se eu entendi.

 

Você tem 3 Div's com 333 pxs cara, e que posicionar uma ao lado da outra?

 

Se for isso, faz assim:

 

<div id="topo" style="float: left; width: 333px;"></div>
<div id="centro" style="float: left; width: 333px;"></div>
<div id="rodape"  style="float: left; width: 333px;"></div>
<div style="clear: both;"></div> // Este para o preenchimento da linha 

 

 

Não sei se é isso, se não for ta fácil também, para trabalhar com div's lado a lado, utilize o float do css.

[7ohmz 0]

Deixa eu ver se eu entendi.

 

Você tem 3 Div's com 333 pxs cara, e que posicionar uma ao lado da outra?

 

Se for isso, faz assim:

 

<div id="topo" style="float: left; width: 333px;"></div>
<div id="centro" style="float: left; width: 333px;"></div>
<div id="rodape"  style="float: left; width: 333px;"></div>
<div style="clear: both;"></div> // Este para o preenchimento da linha 

 

 

Não sei se é isso, se não for ta fácil também, para trabalhar com div's lado a lado, utilize o float do css.

 

Marcus, não eram com estas Divs que eu queria alinhar, mas a sua explicação esclareceu por completo o problema, o "segredo" era usar o float:left nas três colunas.

 

Só não entendi muito bem para que serve a propriedade "clear", você pode me ajudar?

[marcus_du 1]

Sim sim.

 

Então, o problema do float é que ele eleva os itens da página, ou seja, você tem uma linha sendo preenchida por exemplo, por uma div ao lado da outra, o que vai acontecer é que essa linha não vai ser preenchida conforme a div cresça, ai por isso você usa o clear, pra forçar a linha a seguir ele, porque ai no caso, ele torna a linha crescente ao float.

 

Acho que deu pra entender, ou confundi?

 

Dúvidas leia:

 

http://www.w3schools.com/cssref/pr_class_clear.asp

 

Abraço!