Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

PauloRJ

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

Por , em Desenvolvimento frontend

Recommended Posts

PauloRJ    4

PauloRJ
Postado

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!

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

PauloRJ    4

PauloRJ
Postado

Ok!

 

Funcionou com uma errata na coluna direita:

 

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

 

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

SouzaHendrix    0

SouzaHendrix
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

de_col    0

de_col
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito