[Resolvido] Height indefinido

[- KbeçãO - 0]

boa tarde...

estou desenvolvendo uma pagina...

como fiz na minha ultima, tenho uma função em php pra chamar o conteudo, sem ter que usar iFrame:

 

<div id="conteudo" align="center">				

 <?php
	function getGet( $key ){
		return isset( $_GET[ $key ] ) ? $_GET[ $key ] : null;
	}
	$pg = getGet('pg');
	if( is_file( $pg.'.php' ) )
		include $pg.'.php';
	else
	include 'boasvindas.php';
?>

</div>

 

até ai tuuuuudo certo !

nesse site, tenho uma div chamada "principal" onde vai o site inteiro, e nela a div "conteudo" postada acima.

o que me ocorre é o seguinte:

ontem, qdo comecei a pagina, defini um "height" pra div principal, só pra eu ter um noção de onde colocar os elementos.

qdo comecei a colocar o conteúdo hj, o mesmo ficou por baixo da div "rodape" ficou assim:

 

 

sei que isso aconteceu, pois defini um height, pra minhas div's "principal" e "conteudo", mas qdo tiro esse height, fica assim:

 

 

a div principal, qse some, a div conteudo fica na mesa e o rodapés por cima de tudo...

e no IE com ou sem height o erro e o mesmo, mas a div principal, continu no seu lugar...

 

 

aí vão os css's:

 

/* -- / / -- */

#principal{

width: 970px;
height: 500px;
padding: 15px;
margin:0 auto;
border: 1px solid #8F8F8F;
background-image: url(../imgs/logo.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
}



/* -- / / -- */

#rodape{

font-size: 12px;
float:left;
width: 995px;
padding: 5px;
background-color: #EAEAEA;
margin-left: -17px;
color: #818181;

}
/* -- / / -- */

#conteudo{

float: left;
height: 350px;
width: 950px;
padding: 15px ;

}

/* -- / / -- */

#boasvindas{

float: left;
width: 500px;
padding: 0 0 15px 0;
margin-left: 225px;
line-height: 20px;
text-align:justify;

}

/* -- / / -- */

#tit_boas{ //titulo boasvindas

float:left;
width: 950px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;

}

/* -- / / -- */

 

o que eu faço pra resolver isso?

preciso que a div tenha um tamanho definido pelo conteudo, e que o rodape nunca fique por cima !

[Andreh Moura 0]

Fala KbeçãO!

 

Seguinte, vamos ver se consigo passar meu raciocínio.

 

Primeiro, os elementos q estão um abaixo do outro, não precisa de float:left;

Você não precisa setar o height para elementos em que você não sabe o conteudo que vai entrar, aí beleza, no seu primeiro print acontece um bug já conhecido no firefox onde ele não calcula a altura dos elementos filhos com float. Por isso sua div ficou pequena lá em cima. Caso precise mesmo setar o float utilize oveflow:hidden na div pai.

 

Agora me estranhei um pouco com o print do ie onde você mesmo tirando o height cortou a imagem.

 

Mas tente isso que falei de começo e vai postando aqui. Poste o html depois tb.

[- KbeçãO - 0]

bom, depois de ler seu post, de cara, tirei os "height"

 

ai no IE:

 

 

show !! mas no Mozilla o erro persistiu

 

depois tirei os float, como você disse, ai no Mozilla...

 

 

>.<'

 

ee agora?

 

realmente...

tirei TODOS os floats...

ficou tudo no lugar...

TÓPICO RESOLVIDO

[André D. Molin 15]

Você não precisa setar o height para elementos em que você não sabe o conteudo que vai entrar, aí beleza, no seu primeiro print acontece um bug já conhecido no firefox onde ele não calcula a altura dos elementos filhos com float. Por isso sua div ficou pequena lá em cima. Caso precise mesmo setar o float utilize oveflow:hidden na div pai.

 

Isso não é um bug, é um comportamento normal do elemento quando seus filhos estão submetidos a um float.

 

Kbeção, para resolver seu problema, adicione esse seguinte código no seu CSS:

 

.clearfix:before, .clearfix:after {
   content: "\0020";
   display: block;
   height: 0;
   visibility: hidden;
}

.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

 

Essa é uma classe, comumente chamada de clearfix. Você irá utilizar ela no elemento pai que tem seus filhos com float.

No seu caso, você tem a div principal e dentro dela outras divs, com float. Então, você irá adicionar a classe clearfix na div principal (<div id="principal" class="clearfix"></div>).

[- KbeçãO - 0]

e assim, eu posso usar float nos demais?

 

boa cara, testei aqui, deu certinho !

 

:joia:

[Andreh Moura 0]

E ai André!

 

Eu entendia como bug pq era um comportamento que não acontece em outros navegadores. Mas legal, não conhecia essa solução. Sabe se isso passa na validação da w3c?

 

Eu só conheço as soluções aplicadas a div pai setando o overflow:hidden ou float no caso do elemento ter largura fixa. É somente uma linha a ser acrescentada ao código e valida corretamente na w3c.

 

Abraço!