Ir para o conteúdo

Publicidade

 Estatísticas do Fórum

  • 0 Usuários ativos

    0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

Foto:

[Resolvido] Alinhar 3 colunas ao topo, não consigo.

  • Por favor, faça o login para responder
5 respostas neste tópico

#1 PauloRJ

PauloRJ
  • Membros
  • 731 posts

Postado 16 julho 2008 - 09:56

Estou tentando alinhar as tres colunas ao topo e não consigo.

Coluna esquerda: largura de 105px
Coluna central: largura de 300px;
Coluna direita: largura de 85px;


Se tiver dica melhor tambem estou aceitando!

<style type="text/css">
#conteudo {
background-color:#0000FF;
width:300px;
height:300px;
margin-left:105px;
	}

#colunaesquerda{
width: 105px; 
background: #ccf000;
}

#colunadireita{
width: 85px;
margin-left:405px;
background: #FDE95E;
}


</style>

<table width="490px" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" > 
<tr>	
	<td>
	<div id="colunaesquerda">Ola esquerdaa</div>
	<div id="conteudo">Ola centro</div>
	<div id="colunadireita">Ola direito</div>
	</td>
</tr>		 
</table>


Abraços!
:thumbsup:
  • 0

#2 William Bruno

William Bruno

    Desenvolvedor FrontEnd

  • Moderadores Globais
  • 23.564 posts

Postado 16 julho 2008 - 10:21

Esqueça essa tabela, e use float nas colunas.
O mínimo seria assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="pt-br" lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#topo {
	width: 500px;
	margin: 0 auto;
}
#conteudo {
	background-color:#0000FF;
	width:300px;
	height:300px;
	float: left;
}
#colunaesquerda{
	width: 105px; 
	background: #ccf000;
	float:left;
}
#colunadireita{
	width: 85px;
	background: #FDE95E;
}
</style>
</head>
<body>
<div id="topo">
	<div id="colunaesquerda">Ola esquerdaa</div>
	<div id="conteudo">Ola centro</div>
	<div id="colunadireita">Ola direito</div>
</div>
</body>	
</html>

  • 0

#3 PauloRJ

PauloRJ
  • Membros
  • 731 posts

Postado 16 julho 2008 - 10:31

Ok!

Funcionou com uma errata na coluna direita:

#colunadireita{
	width: 85px;
	background: #FDE95E;
	float:right;
}


:clap:
  • 0

#4 William Bruno

William Bruno

    Desenvolvedor FrontEnd

  • Moderadores Globais
  • 23.564 posts

Postado 16 julho 2008 - 10:59

Na verdade, nem precisa do float na coluna da direita... pois o conteudo estando flutuado, a da direita já sobe...
^^
Só depois em baixo, você vai precisar de um clear, para voltar os elementos seguintes ao fluxo.
  • 0

#5 SouzaHendrix

SouzaHendrix
  • Membros
  • 1 posts

Postado 23 setembro 2008 - 17:26

Galera, também estou com um problema semelhante, porém por fora das 3 colunas tenho uma DIV 'geral', mas quando eu redimensiono (diminuo) o browser, a coluna da direita vai pra baixo.

#geral { width:1000px; margin:0; display:block; clear:both; }

#conteudoCentro { width:620px; float:left; overflow:hidden; margin:0; display:block;}

#lateralEsquerdo { float:left; width:180px; overflow:hidden; display:block;}

#lateralDireito { float:right; width:190px; overflow:hidden; display:block;}

...
<div id="geral">
<div id="lateralEsquerdo">...</div>
<div id="conteudoCentro">...</div>
<div id="lateralDireito">...</div>
</div>

Alguém saberia me dizer o porque não consigo manter as colunas fixas, e como resolvo este problema ???

Obrigado.
  • 0

#6 de_col

de_col
  • Membros
  • 14 posts

Postado 25 setembro 2008 - 12:08

cara beleza?

entao
primeiro troca todos os px por %

só me tira uma duvida pq você colocou display: block nas divs??
e overflow:hidden ???


as divs ja SÃO por naturaza blocks

da uma olhada nesse site
http://www.maujor.com/index.php

*{margin:0; padding:0;} //pra q todos os elementos fiquem sem margin e padding

#geral { width:100%; }

#conteudoCentro { width:49%; float:left; }

#lateralEsquerdo { float:left; width:25%;  }

#lateralDireito {  width:25%;  float:right; }

</style>

...
<div id="geral">
<div id="lateralEsquerdo">...</div>
<div id="conteudoCentro">...</div>
<div id="lateralDireito">...</div>
</div>

espero ter ajudado


att,
de col

Editado por Mário Monteiro, 20 outubro 2008 - 19:13 .
Substituir CODEBOX por CODE para eliminar barras de rolagem e espaços desnecessarios

  • 0