Ir para conteúdo

POWERED BY:

Arquivado

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

Design Brasil

DIVs com FLOAT não empurram para baixo as outras DIVs

Por , em Desenvolvimento frontend

Recommended Posts

Design Brasil    0

Design Brasil
Postado

Bem, o meu problema é o seguinte:

Tenho duas DIVs principais ("div_um" e "div_dois");
Na primeira DIV existe outra DIV ("box"), que por sua vez possui outras três DIVs("div_a", "div_b" e "div_c");
Essas três DIVs eu quero que fiquem uma do lado da outra e por isso utilizei o FLOAT: LEFT em todas, eu defini o HEIGHT: AUTO porque em uma delas será o conteúdo do site e quero que ela aumente de tamanho de acordo com o texto.

Obs. Coloquei um MIN-HEIGHT: 300PX só para simbolizar um texto maior que a DIV mãe.

Ai que entra o problema!

Quando o tamanho da div_a excede o MIN-HEIGHT da div_um, ela não empurra a div_dois, nem muito menos aumenta o tamanho da div_um. Ela simplesmente passa por cima da div_dois ou joga ela para o lado quebrando todo o layout.

Vou deixar abaixo o código HTML e o CSS para facilitar a compreensão.

 

 

CÓDIGO HTML:

 







<body>

<div id="div_um">
	<div id="box">
		<div id="div_a"></div>
		<div id="div_b"></div>
        <div id="div_c"></div>
	</div>
</div>

<div id="div_dois"></div>

  
</body>

CÓDIGO CSS:

 







* {margin:0; padding:0;}

#div_um {
	background: #00F repeat-x center top;
	text-align: center;
	height: auto;
	min-height: 200px;
	width: 100%;
	min-width: 900px;
}

#box {
	height: auto;
	min-height: 200px;
	width: 900px;
	margin: 0px auto;
}

#div_a {
	background: #F00 no-repeat right center;
	height: auto;
	min-height: 300px;
	width: 150px;
	float: left;
}

#div_b {
	background: #FF0 center;
	height: auto;
	min-height: 300px;
	width: 600px;
	float: left;
}

#div_c {
	background: #F0F no-repeat left center;
	height: auto;
	min-height: 300px;
	width: 150px;
	float: left;
}

#div_dois {
	background: #0F0 repeat-x center top;
	height: 200px;
	width: 100%;
	min-width: 900px;
}

 


E também o link do modelo hospedado.

 


Desde já agradeço, DB

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buchechafs    6

Buchechafs
Postado

Teste isso abaixo. Você tem que limpar o float com clear:both;

 

<body>
 
<div id="div_um">
	<div id="box">
		<div id="div_a"></div>
		<div id="div_b"></div>
                <div id="div_c"></div>
                <div style="clear:both;"></div>
	</div>
</div>
 
<div id="div_dois"></div>
 
  
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Design Brasil    0

Design Brasil
Postado

Boa Tarde, Buchechafs.

 

Simples e objetivo! Valeu!!!

 

Limpei o FLOAT e ficou perfeito. A div_um agora aumenta de acordo com a div_b que representa meu conteudo e empurra a div_dois.

 

Agradecido, Solucionou o meu problema!

 

________

 

Boa Tarde, Wanderson Valerio,

 

Antes de procurar o Fórum, minha primeira busca foi no Google e também não deu certo utilizar o FLOAT nas divs pai porque a div box está centralizada, e assim que eu apliquei o float ela herdou foi para a esquerda também.

Mas mesmo assim agradeço por sua ajuda!

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