Ir para conteúdo

POWERED BY:

Arquivado

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

joazweb

[Resolvido] Problemas com height:auto !

Por , em Desenvolvimento frontend

Recommended Posts

joazweb    0

joazweb
Postado

Galera eu tenho a seguinte situacao

eu tenho um container, onde nele vai todo conteudo.(widht:100%)

 

Dentro dele eu tenho uma div conteudo, de 780px centralizada na tela.

que dentro dela eu coloquei mais tres divs pra repartir

em menu esquerda, centro, e menu direita.

 

Bom primeiro gostaria de saber se eh mais ou menos assim mesmo, que

se costuma fazer, ou tem outra solucao mais facil,

 

Eu quero que o container, e o conteudo, crescam de acordo com o

tamanho de uma das divs internas(menu esquerda, centro ou menu da direita)

pq tem no final mais uma div que eh o rodape

 

Segue o link para ver como que esta o codigo, em partes funciona no ff

outrora funciona no ie(6 e 7), nao sei como fazer pra funcionar nos navegadores

 

segue o codigo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>

<style type="text/css">
<!--
body {
	margin:0px;
	background-color: #000000;
}
#container {
	padding-top:4px;
	background-color: #9999CC;
	height:auto;
	width:100%;
	margin: 0px;
}
#conteudo {
	padding:0;
	position:relative;
	top: 14px;
	height: auto;
	width: 774px;
	margin: auto;
	border: 1px solid #999999;
	border-top:0;
		background-color: #333333;

}
#menuleft {
	padding:0;
	margin:0;
	position:relative;
	float:left;
	height: auto;
	width: 140px;
	border: 0;
	background-color: #FFFFFF;
}
#center1 {
	padding:0;
	position:relative;
	float:left;
	left:4px;
	height: auto;
	width: 482px;
	border: 1px solid #999999;
	background-color: #CCCCCC;
}
#menuright {
	padding:0;
	margin:0;
	position:relative;
	float:right;
	height: auto;
	width: 140px;
	border: 1px solid #999999;
	background-color: #0000FF;
}
#rodape{
	padding:0;
	position:relative;
	top:35px;
	background-color: #992299;
	height: 35px;
}
-->
</style>
</head>

<body>
  
<div id="container">
	<div id="conteudo">
		<div id="menuleft">
		Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>
		Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>Menu Esquerda<p>
		</div>

		<div align="center" id="center1">
		Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>
		Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>Centro<p>
		</div>
		
		<div id="menuright">
		Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>
		Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>Menu Direita<p>
		</div>
	
	</div>

	<div id="rodape"></div>

</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

tente seguir essas ideias:

 

como fazer um layout de tres colunas:

http://forum.imasters.com.br/index.php?showtopic=222275

 

height:auto min-height e float:

http://forum.imasters.com.br/index.php?showtopic=261803

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

joazweb    0

joazweb
Postado

tente seguir essas ideias:

 

como fazer um layout de tres colunas:

http://forum.imasters.com.br/index.php?showtopic=222275

 

height:auto min-height e float:

http://forum.imasters.com.br/index.php?showtopic=261803

 

;)

agradecido silverfox;

 

resolvi meu problema com a propriedade clear:both no rodape, como mostrou exemplo no link;

 

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

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