Posicionar div embaixo da outra

[watequate 0]

Já visitei o site do Maujor para aprender a fazer layouts com 3 colunas usando divs e consegui aplicar com exito, inclusive posicionando a div relacionada ao rodape do site.

 

Estou querendo agora posicionar mais de uma div(como o rodape) embaixo das divs do conteudo do site. Como se fosse 2 rodapes. Por exemplo, o site do Globo Esporte.com, onde exsitem várias divs com os assuntos, uma embaixo da outra.

 

Espero que tenham compreendido e se possível aguardo um ajuda.

[inforsis 1]

Boa Noite!

Desculpa mais eu nao entendi muito bem,... poderia ser mais expecifico...

Tenta usar o clear: both; e posicionar a div normalmente... pelo que entendi isso resolve...

 

at mais

[Marcus Vinícius Nash 0]

Entendi o que voce quiz dizer! no caso voce tem que criar outra div dando um novo posicionamento

pois se voce colocar <div>alguma coisa</div> e outro <div>outra coisa</div> automaticamente ja vai para parte de baixo!

[brcontainer 16]

Nesse caso é bom criar elementos PAIs e dentro deles ir esses div's que vão um em baixo do outro

//topo
<div id="logo">Topo</div>

//flutuando para a esquerda:
<div id="esquerda">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

//flutuando para a direita:
<div id="direita">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

<div id="rodape"> Css: #rodape{ clear:both; height:100px;background:#fc0; } </div>

é essa a ideia ;)

[watequate 0]

Silverfox, essa parte eu já aprendi, pra jogar o rodape embaixo das outras divs independentemente do conteudo delas. O que eu queria é colocar outras divs, como se fosse o rodape, embaixo das divs.

 

Um exemplo prático: no site Site

 

Esse site, eu fiz usando tabelas. Gostaria de refaze-lo usando div. A minha dúvida é para posicionar a parte de patrcínios, e depois o rodape.

 

Espero que tenha sido mais direto.

[brcontainer 16]

você que não entedeu o que eu falei, quanto a parte de rodape e tudo mais eu ja entendi que você entendeu, eu só lhe mostrei como posicionar os DIVs um debaixo do outro ¬¬

 

vou por um css de exemplo, o que estou querendo lhe explicar é o uso dos elementos PAIs e FILHOs

 

exemplo, espero que agora tenha lhe ajudado, lembre-se uma boa leitura sempre ajudará você no futuro hehehe

<style>
#tudo{
width:800px;
margin:0 auto;
}
#logo{
height:100px;
background:#fc0;
}
#esquerda{
width:120px;
height:500px;
background:#c9c9c9;
float:left;
}
#direita{
width:120px;
height:500px;
background:#c9c9c9;
float:right;
}
#esquerda div,#direita div{
margin:5px;
width:100px;
height:100px;
background:#dcdcdc;
}
#rodape{ clear:both; height:100px;background:#fc0; }
</style>
<div id="tudo">
<div id="logo">Topo</div>

<div id="esquerda">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

<div id="direita">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

<div id="rodape"></div>
</div>

[watequate 0]

Entendi. POsso fazer o mesmo processo para colocar divs tomando todo espaço horizontal do site, como o rodape? criando um elemento pai "parte de baixo", colocando as divs de rodape e uma outra qualquer?

[brcontainer 16]

infelizmente não =/

mas você pode usar um background para simular isso ou usar a essa tecnica para ocupar o espaço:

http://forum.imasters.com.br/index.php?showtopic=225319

 

espero que lhe ajude abraços ;)

[watequate 0]

Mas Silver, esse topico q me indicou, é para a técnica Faux Colums, para preencher as colunas na vertical.

 

E para fazer como eu quero que nem na figura abaixo, nos retangulos em vinho?

 

[brcontainer 16]

<style>

#tudo{

width:800px;

margin:0 auto;

}

#logo{

height:100px;

background:#fc0;

}

#esquerda{

width:120px;

height:500px;

background:#c9c9c9;

float:left;

}

#direita{

width:120px;

height:500px;

background:#c9c9c9;

float:right;

}

#esquerda div,#direita div{

margin:5px;

width:100px;

height:100px;

background:#dcdcdc;

}

#rodape{ clear:both; height:100px;background:#fc0; margin:5px;}

#div2{ height:100px;background:#fc0; margin:5px;}

</style>

<div id="tudo">

<div id="logo">Topo</div>

 

<div id="esquerda">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

 

<div id="direita">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

 

<div id="rodape"></div>

<div id="div2"></div>

</div>

é que você não me explicou direito, agora entedi, a logica é essa depois de usar o CLEAR o floats não afetam os proximos elementos ;)

[watequate 0]

RESOLVIDO. Pois é. Depois que postei a ultima resposta, fui testar o que eu tinha perguntado e funcionou.

 

Agradeço sua ajuda, porque a partir do que você falou de usar um elemento pai que abriu minha cabeça para usar o clear: both na div do rodapé e depois adicionar quantas divs quiser dentro dele.

 

Obrigado mais uma vez.

[brcontainer 16]

que isso precisando estamos ae ;)

abraço e boa sorte.

[Edson Filho 0]

Boa Noite! Desculpa mais eu nao entendi muito bem,... poderia ser mais expecifico... Tenta usar o clear: both; e posicionar a div normalmente... pelo que entendi isso resolve... at mais

 

Em pleno 2015 vc me salvou @inforsis ... estava com um problema o qual sem querer por motivos nao sei porque o footer estava por trás de uma div ...

utilizei o clear:both e surprise UASHSUAHU resolveu \o

Muito Obrigado