1. Fórum
  2. /
  3. Clube do Desenvolvedor
  4. /
  5. Clube do WebDesigner
  6. /
  7. Problema Div pai e div filho

Problema Div pai e div filho

  • krauli
  • Avatar de krauli Autor do Tópico
  • Offline
  • JCB! Novato
  • JCB! Novato
Mais
11 anos 9 meses atrás #74941 por krauli
krauli created the topic: Problema Div pai e div filho
Boa noite pessoaç, é meu primeiro post aqui no forum. Estou desenvolvendo um site, meu primeiro problema foi deixar o rodape no rodapé, após conseguir isso veio o problema que as div filhos estão passando a div pai, ja vi bastante topicos falando de dar clear abaixo das div que estão flutuando, porem nao consegui resolver, fiz uma versão simplificada do codigo para ajudar a visualização aqui, a questão é a seguinte. Existe uma div tudo que tem uma div conteudo e duas divis laterais porem o conteudo passa por cima e a div pai não acompanha.

Primeiro o CSS
* {margin:0;padding:0;} 

html, body {height: 100%;}

#cima {
	background-color: #930;
	height: 50px;
	width: 100%;
}
#tudo {
	background-color: #0C0;
	height: 100%;
	width: 1000px;
	position: relative;
	/* Codigo para centralizar */
	left: 50%;
	/* esse valor é metade do width: */
    margin-left: -500px !important;
}

#esq {
	background-color: #09C;
	height: 200px;
	width: 100px;
	float: left;

}

#conteudo {
	width: 800px;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: absolute;
	margin: auto;
	float: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 50px;
	padding-left: 0px;
	clear: both;
	right: 0px;
	left: 0px;
}

#topo {
	background-color: #F6C;
	height: 150px;
	width: 800px;
	float: left;
}
#meio {
	background-color: #C3C;
	height: auto;
	width: 800px;
	float: left;
}

#rodape {
	background-color: #900;
	height: 50px;
	width: 800px;
	float: left;
	bottom: 0px;
	position: absolute;

}

#dir {
	background-color: #0F0;
	height: 200px;
	width: 100px;
	float: right;

}

.clearFull{
 display:block;
 clear:both;
}

Agora o html
<!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>Untitled Document</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>

<div id="cima">
<p> cima </p>
</div>

<div id="tudo"> 

	<div id="esq"> 
	<p> Esq </p>

	</div>
    
    <div id="dir">
	<p> direita</p>

 	</div>
    
	<div id="conteudo"> 
	<p> cont </p>
    
		<div id="topo"> 
		<p> topo </p>
		</div>
        
		<div id="meio"> 
		<p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> aaaaaaaaaaaaaaa </p>
        <p> BBBBBBBBBBBBBBB </p>
		</div>
        
		<div id="rodape">
		<p> rodape </p>
 		</div>


	</div>



</div>

<body>
</body>
</html>

desde já agradeço pessoal

Please Entrar ou Registrar to join the conversation.


Mais
11 anos 9 meses atrás #74952 por renpv
renpv replied the topic: Re: Problema Div pai e div filho
faux columns
[color=#808080:2ig2voll]"Feliz aquele que transfere o que sabe e aprende o que ensina."(Cora Coralina)
"A mente que se abre a uma nova idéia jamais voltará ao seu tamanho original."(Albert Einstein)[/color:2ig2voll]
[url=http&#58;//twitter&#46;com/renatopaivabv:2ig2voll]@renatopaivabv[/url:2ig2voll]

Please Entrar ou Registrar to join the conversation.

  1. Fórum
  2. /
  3. Clube do Desenvolvedor
  4. /
  5. Clube do WebDesigner
  6. /
  7. Problema Div pai e div filho
Joomla Templates Best Joomla Templates Premium Joomla Templates Free Joomla Templates