[Resolvido] Layout Flutuante Vertical

[Paulo Andraus 0]

Olá, pessoal.

Estou tendo um problema que está difícil de resolver.

Preciso que as minhas div´s se encham de acordo com o conteúdo que eu puser nelas.

Por exemplo, quanto mais notícias na div notícias, maior ela fica, empurrando o rodapé pra baixo.

 

O problema é que eu tenho que colocar uma altura fixa na Div Conteúdo (ela não estará no código, pois faz parte de outro recorte do php) senão o rodapé não desce...

Se alguém puder me ajudar, desde já agradeço.

 

Os códigos:

HTML

<div id="noticias">
  <p class="titnoticias">Notícias</p>
   <ul>
    <li class="listanoticias1">21/05/2010 - <strong>Procura por incentivos fiscais para inovação quase triplica.</strong>O número de empresas que utilizaram incentivos da Lei 111.196/05 (conhecida como Lei do Bem) saltou de 130 em 2006 para 321 em 2007.</li>
    
    <li class="listanoticias">21/05/2010 - <strong>Procura por incentivos fiscais para inovação quase triplica.</strong> O número de empresas que utilizaram incentivos da Lei 111.196/05 (conhecida como Lei do Bem) saltou de 130 em 2006 para 321 em 2007. </li>
   </ul>
    <p class="mais_noticias"><a href="#">|Mais Notícias|</A></p></div><a id=indique href="#"><img src="images/indique.jpg" width=314 height=143></A> 
 </div> <!-- fim div id noticias -->
<div id="rodape">
  <address>
     <strong><a title="Nilko Metalurgia" href="#">Nilko Metalurgia Ltda</a></strong> | Av. Maringá, 1683 - Pinhais   Cep: 83325-360  Fone: 41 3668-1780 - Fax: 41 3661-2288 
  </address>
 <div id="contatos">
  <ul>
   <li class="contatos" id="twitter"><a title="Twitter Nilko" href="#">Siga-nos no Twitter</a></li>  
   <li class="contatos" id="orkut"><a title="Orkut Nilko" href="#">Nos adicione no Orkut</a></li>
   <li class="contatos" id="youtube"><a title="Youtube Nilko" href="#">Veja nosso canal no Youtube</a></li>   
   <li class="contatos" id="blogger"><a title="Blog Nilko" href="#">Acesse nosso Blog</a></li>        
  </ul>
 </div> <!-- fim div id contatos -->
</div>  <!-- fim div id rodapé-->

CSS da parte notícias

#noticias{
	position:relative;
	width:629px;
	min-height:209px;
	float:left;
	margin-left:6px;
	clear:both;
	background: url(images/images/quadro_noticias_topo.jpg) no-repeat top center;
	margin-top:60px;
}

.titnoticias {
	font-family: Tahoma, Geneva, sans-serif;
	color:#005da4;
	position:relative;
	top:7px;
	left:50px;
	width:90px;
	padding-bottom:15px;}
	
.listanoticias {
	list-style-image:url(images/setaazul.png);
	font-size:12px;
	width:563px;
	z-index:1;
	width:480px;
	margin:6px 0 0 30px;
	padding:12px 0 0 0;
	line-height:110%;}

.listanoticias1 {
	list-style-image:url(images/setaazul.png);
	font-size:12px;
	width:563px;
	z-index:1;
	width:480px;
	margin:6px 0 0 30px;
	padding:12px 0 0 0;
	line-height:110%;
	border-bottom:1px dotted #6c6c6c;
	height:40px;}

.linha1{
	width:562px;
	height:3px;
	color:#cdcdcd;
	list-style-type:none;
	background:url(images/testelinha.jpg);
	margin:14px;}

.mais_noticias {
	position:absolute;
	bottom:10px;
	right:10px;
	font-size:9px;
	font-weight:bold;
	color:#6c6c6c;
	text-decoration:none;
}
.mais_noticias a: {
	text-decoration:none;}
.mais noticias a:hover {text-decoration:underline;}

e agora da parte rodapé

#rodape{
	position:relative;
	width:950px;
	min-height:118px;
	background:url(images/fundo_rodape.jpg) repeat-x;
	bottom:-118px;
	clear:both;
	margin:auto;}

#contatos{
	width:41px;
	position:absolute;
	right:4px;
}
#contatos ul li {
	display:inline;
	text-indent:-9000px;
}


#twitter a{
	background:url(images/twitter.png) top center no-repeat;
	width:40px;
	height:59px;
	display:block;
}

#orkut a{
	background:url(images/orkut.png) top center;
	width:40px;
	height:40px;
	display:block;
	position:relative;
	bottom:59px;
	right:50px;
	}
#youtube a{
	background:url(images/youtube.png) top center;
	width:35px;
	height:40px;
	display:block;
	position:relative;
	bottom:100px;
	right:100px;
	}
#blogger a{
	background:url(images/blogger.png) top center;
	width:40px;
	height:40px;
	display:block;
	position:relative;
	bottom:140px;
	right:150px;
	}

address{
	text-decoration:none;
	font-style:normal;
	padding:10px 0 0 30px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	position:relative;
	top:30px;
	}

strong {
	color:#666666;}

Caso precisem de mais alguma informação, por gentileza, me avisem por aqui mesmo!

 

Abraços!

[Evandro Oliveira 331]

Acho que você precisa de

min-height

Note que você foi contraditório

[...] empurrando o rodapé pra baixo.

 

O problema é que eu tenho que colocar uma altura fixa [...]

[Paulo Andraus 0]

Acho que você precisa de

min-height

Note que você foi contraditório

[...] empurrando o rodapé pra baixo.

 

O problema é que eu tenho que colocar uma altura fixa [...]

Na verdade, Evandro, só acho que não soube me expressar.

Se eu puser a altura na div conteúdo (digamos, 2.000px) o rodapé desce. Caso não faça isso, ele não desce, fica no meio da página.

 

Estou até refazendo o arquivo todo, pra ver se encontro o erro.

Mas realmente está difícil.

[Evandro Oliveira 331]

Tirar o

position: relative

já é um começo.

[Paulo Andraus 0]

Tirar o

position: relative

já é um começo.

 

Não entendi, Evandro. Você não considera position:relative uma prática boa?

Bem, eu consegui resolver o problema.

Criei uma div logo acima do rodapé chamada Clear, e dei clear both nela.

Assim, o Rodapé fica sempre na base da página, não importa o tamanho dela.

 

Obrigado para quem me ajudou!

[Evandro Oliveira 331]

Não entendi, Evandro. Você não considera position:relative uma prática boa?

Atualmente, só tenho utilizado position:relative se o container for receber algo com position:absolute dentro.