Ir para conteúdo

POWERED BY:

Arquivado

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

Kaynã Araújo

Div dentro de div e outra div

Por , em Desenvolvimento frontend

Recommended Posts

Kaynã Araújo    0

Kaynã Araújo
Postado

Boa noite pessoal!

 

Peço desculpas por uma dúvida que julgo até meio ignorante, mas já quebrei a cabeça por aqui e não consegui resultados.

 

Bom, tenho uma div "conteudo", dentro dela a div "centro" e dentro da div centro outras duas divs "direita" e "esquerda".

 

<div class="tudo">
  <div class="topo">
      
  </div>

  <div class="conteudo">
     <div class="centro">
        <div class="esquerda>
            
        </div>
        <div class="direita">
            
        </div>
     </div>   
  </div>

  <div class"rodape>
      
  </div>
</div>

 

Quando coloco o conteúdo do site dentro da div "centro", a div "rodape"é empurrada para baixo normalmente. Agora em um dos links do site, precisei criar a div "esquerda" e a div "direita", porém ao inserir o conteúdo nelas a div "conteudo" não é empurrada para baixo., como acontece quando eu coloco o conteúdo na div "centro" e o rodapé fica no final da tela.

 

O conteúdo acaba passando por baixo da div rodapé, é criada uma barra de rolagem, porém o rodapé não desce, pois a div "conteudo"não foi empurrada.

 

Se quiserem coloco um print para entenderem melhor.

 

Desde já, obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

posta teu codigo css pra eu dar uma olhada, só com o html fica dificil saber :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gerciley    14

Gerciley
Postado

Cara, Sugiro pra você alinha as div direita e esquerda apenas dando Float Left na div da esquerda, que a da direita automaticamente vai ficar alinhada, depois aplique um Clear both no objeto pai que ela vai empurrar tudo pra baixo de acordo com o conteúdo das divs direita e esquerda, tenta ai depois posta, poste também o código CSS.

Valew Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Sem ver o seu css sugiro retirar a div.centro e adicione um clear: both na div.rodape que deve resolver seu problema :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marrabel    20

Marrabel
Postado

Eu tenho um modelo pronto que eu sempre utilizo para 3 colunas.

 

Espero que te ajude a solucionar suas dúvidas.

 

Exemplo:

 

<style type="text/css">
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}

#topo{
background:#F00;
height:150px;
width:100%;
}

#conteudo{	
width:100%;
}

#esquerda{
background:#333;
color:#FFF;
float:left;
height:1000px;
width:25%;
}

#direita{
background:#CCC;
color:#FFF;
float:right;
height:1000px;
width:25%;
}

#centro{
background:#000;
color:#FFF;
height:1000px;
}

#rodape{
background:#0F0;
bottom:0;
position:relative;
height:100px;
width:100%;
}

#clear{
clear:both;
}
</style>

</head>

<body>
<div id="tudo">
<div id="topo">
Topo
</div>
<div id="conteudo">
	<div id="esquerda">
   	Esquerda
   	</div>
   	<div id="direita">
   	Direita
   	</div>
   	<div id="centro">
   	Centro
   	</div>
</div>
<div id="clear"></div>
  	<div id="rodape">
Rodapé
  	</div>
</div>

 

Assim, se o conteúdo for maior que a tela, o rodapé segue, se for menor, ela fica no fim da pagina

 

Espero ter ajudado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaynã Araújo    0

Kaynã Araújo
Postado

O meu código faz exatamente isso!

Se o conteúdo é menor o rodapé fica no fim da página, caso contrário, ele empurra. Sem a div "direita" e a div "esquerda" estava empurrando, tudo muito lindo. O problema foi quando as adicionei.

 

Como disse anteriormente, dei uma vacilada e acabei trazendo o notbook para o trampo sem o bateria e não trouxe o carregador também.

 

Assim que eu chegar em casa vou testar tudo e posto para vocês o resultado. Vou postar também o CSS do jeito que está, pois se eu estiver fazendo algo errado e vocês me corrigirem já é um aprendizado a mais.

 

Valeu galera!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaynã Araújo    0

Kaynã Araújo
Postado

Vamos lá galera:

 

O CSS:

.tudo {
  min-height:100%;
  position:relative;
}

.topo {
  background: #FF9900;
  padding: 0px;
}

.imgtopo {
width: 980px;
height: 340px;
margin: 0px auto;
background: #FF9900 url(images/img06.jpg) no-repeat left top;

}

.conteudo {
  margin: 0 auto;
  padding-bottom:60px;
}

.centro {
margin: 0 auto;
width: 980px;
background-color: #fff;
}

.esquerda {
float:left;
width: 120px;
}

.direita {
float:right;
width:844px;
padding: 5px 5px 5px 5px;
}

.rodape {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;   
  background:#2C2723;
}

 

O HTML:

<div class="tudo">
  <div class="topo">
     <div class="imgtopo">
         
     </div
  </div>

  <div class="conteudo">
     <div class="centro">
        <div class="esquerda">
            
        </div>
        <div class="direita">
            
        </div>
     </div>   
  </div>

  <div class"rodape">
      
  </div>
</div>

 

É basicamente isso aí, o que tenho a mais é uma div do menu que tem muita coisa e acho que não intefere em nada aqui, por isso não postei.

 

E como disse, se dentro da DIV CENTRO eu insiro o conteúdo ele empurra o rodapé normalmente, agora inserindo o conteúdo dentro da DIV DIREITA ou DIV ESQUERDA ele passa por baixo do rodapé.

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

tira o position: absolute do rodape

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

tenta colocar um clear:both e tira aquele bottom:0

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

tem link do site pra eu dar uma analisada ? pois pelo teu codigo era pro rodape ficar no rodape.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Não coloquei no ar ainda. Posso te mandar os arquivos por e-mail?

 

Poste os códigos-fonte aqui mesmo. Assim outras pessoas podem te ajudar além dele.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Seria um paradoxo se tu adicionasse no #rodape

position:absolute;
bottom:0;

?

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Mas Diéssica, com position absolute o a o elemento anterior pode subpor/sobrepor o rodape

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Mas Diéssica, com position absolute o a o elemento anterior pode subpor/sobrepor o rodape

 

Beleza, aí você adiciona uma margin a esse elemento.

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