[Resolvido] Problema com DIV e float Right/Left

[Jackall 0]

Boa Tarde pessoal, estou desenvolvendo um site e comecei a fazê-lo em tableless.

 

Porém encontrei um problema, tenho o seguinte HTML:

 

<div class="conteudo" align="center">    
   
    <div class="menu-lateral">
    </div>
     
    <div class="dados">
    </div>

</div>

e o CSS:

 

.conteudo{width:768px; background:#FFF;}
.dados {width:538px; height:300px;}
.menu-lateral {width:195px; height:300px;}

até ai tudo bem:

 

Aparece Um div grande com dois outros Divs dentro, estes um em cima do outro.

 

Porém quero colocar os dois divs um AO LADO DO OUTRO:

 

.dados {width:538px; height:300px; float:right}

.menu-lateral {width:195px; height:300px; float:left}

 

O problema é que fazendo isso os dois divs "saem" de dentro do div grande (conteudo) e ficam do lado de fora, fazendo com que o div grande perca o height , entenderam?

 

Como que eu faço pra deixar O div grande com os dois divs dentro, estes, um ao lado do outro sem perder o "height dinamico"?

 

Me deem uma luz, valew!

[ORisonho 0]

Isso apenas mostra que você ainda tem que estudar bem o tabless para poder faze-lo obedecendo regras e assim acertantdo nos códigos.

 

Primeiramente você tem que criar suas Divs dentro da regra de hierarquia de divs (caso não saiba leia a respeito), pois com a hierarquia de Divs você vai enteder que elas tem que obedecer uma regra que esta acima delas.

 

Segundo, o float normalmente faz com que a Div que o esta obedeça para ele mesmo e o que vem depois dele, sendo assim , só era preciso colocar float:left na primeira div e repetir para as outras, sendo assim elas vão estar uma do lado da outra conforme o tamando da sua div hierarquica, ou seja, não se pode pegar duas Divs de 200px e cololar uma do lado da outra em um espaço de 350px de div "pai".

 

Bom a resposta é essa, simples e direta.

 

Espero ter ajudado.

[Jackall 0]

Eu não quero que as tres divs fiquem uma ao lado da outra, eu quero que fique uma Div PAI e outras 2 divs filhas dentro, e essas 2 filhas fiquem uma ao lado da outra. O problema é que quando coloco o float das 2 divs filhas (Left e Right) elas "Vão para fora da div PAI". a Largura e o height do div pai são totalmente maiores que os das 2 divs filhas juntas, ou seja, não tem como exceder o tamanho.

 

A div PAI tem o height Dinamico, e quando coloco o float das 2 divs filhas ela perde esse Height dinamico.

[ORisonho 0]

Eu não quero que as tres divs fiquem uma ao lado da outra, eu quero que fique uma Div PAI e outras 2 divs filhas dentro, e essas 2 filhas fiquem uma ao lado da outra. O problema é que quando coloco o float das 2 divs filhas (Left e Right) elas "Vão para fora da div PAI". a Largura e o height do div pai são totalmente maiores que os das 2 divs filhas juntas, ou seja, não tem como exceder o tamanho.

 

A div PAI tem o height Dinamico, e quando coloco o float das 2 divs filhas ela perde esse Height dinamico.

 

É ai que você mesmo não esta entendendo e tbm não entendeu o que eu expliquei, o que eu disse foi para voê colocar o mesmo float nas divs que você quer que seja uma do lado da outra, que no caso são essas Divs "filhas" que mencionou. Simples!

[Jackall 0]

Sim, isso funciona... eu não disse que elas não ficam uma ao lado da outra, elas ficam , sem problemas.

O problema aqui é o seguinte, vou tentar explicar melhor:

 

Eu Utilizo o Google Chrome e, tanto ele como o Firefox 3/IE mostram a mesma coisa.

 

As divs filhas ficam uma ao lado da outra, porém o HEIGHT da div PAI some... ele não fica dinamico, sou obrigado a colocar um height pré determinado, e se as divs FILHAS ultrapassarem esse height o HEIGHT do div PAI não acompanha.

 

Não colocando o float e deixando as divs filhas uma em cima da outra o HEIGHT da div PAI fica dinamico, aumentando conforme necessário sem a necessidade de pré-estabelecer um height.

 

Essa é a minha pergunta, como faço para deixar as divs filhas uma ao lado da outra sem que o div PAI perca seu height dinamico?

Não adianta colocar o height do div pai como "auto" ou "100%".

 

Valew

[ORisonho 0]

Eu não cheguei a ter esse problema não, mas acho que height="100%" já resolve, pois o mesmo sera interpretado pelo navegador que ele é 100% daquilo que existe, pouco ou muito, mas lógico o 100% tem que estar tanto no "pai" quanto nos "filhos", não pode estar diferente.

 

Tenta ai e me fala o resultado.

[Thiago Retondar 18]

Elementos com float esvaziam os seus containers. Para isso, antes de feixar o container, coloque um elemento de bloco com clear: both.

 

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

[ORisonho 0]

Elementos com float esvaziam os seus containers. Para isso, antes de feixar o container, coloque um elemento de bloco com clear: both.

 

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

 

Valeu... eu não sabia dessa. Vo anota aqui!

[Jackall 0]

Então dentro do div PAI, além das 2 divs filhas eu tenho que por um com CLEAR: BOTH ??

Ou eu ponho clear:both nas div filhas?

[Jackall 0]

Aeee, valew!

Funcionou certinho!

[Henrique Barcelos 290]

Não precisa disso não... Não adicione elementos desnecessários na sua página.

 

Quando flutuar o conteúdo de um elemento, declare:

 

overflow: hidden;

Veja um exemplo:

 

<div id='container'>
 <p>
 	Teste<br/>
 	Teste<br/></p>
</div>

#container {
	overflow: hidden;
	backgroundo: #C00;
}

#container p {
	float: left;
	background: #FF0; 
}