[Resolvido] Ajustar div - CSS

[[VAZA] 0]

Pessoal, estou com uma duvida com relação a posicionamento de div.

Eu estou criando uma div e logo depois outra, só que eu quero que a DIV que esta sendo criada por ultima, fique em cima da div que esta sendo criada primeiro. E a div de baixo, vai acompanhando a div de cima, caso a div de cima contenha textos maiores ou <br>.

Ex.:

 

<div id="div1">

Conteudo 1

</div>

 

<div id="div2">

Conteudo 2

</div>

 

Eu quero que a div2 fique em cima da DIV1, mostrando o texto: conteudo 2.

Mas caso tenha mais textos ou <br> na div2, a div1 vai abaixando, conforme conteudo da div2.

Como posso fazer isso?

[Evandro Oliveira 331]

<div id="pai">
 <div id="filha1"><p>um texto exemplo aqui</p></div>
 <div id="filha2"><p>outro texto aqui</p></div>
</div>

 

css

#pai { position: relative; }
#pai div { position: absolute; top: 0; bottom: 0; }

 

algo me diz que não vai dar certo

 

Testa aí, fiz de cabeça, não sei se funciona

[ORisonho 0]

É isso ai, tem que usar hierarquia de divs mano... o colega respondeu certo ai...qualquer coisa da uma esturdada sobre o assunto para compreender melhor.

[Desnickadu 0]

se você quer que a 2 apareça antes da 1 basta coloc-la antes na marcação HTML.

 

por padrão divs com conteudo não se sobrepõe, então quanto a isso você não terá problema.

isso só vai acontecer caso você especifique algum 'position' para elas.

 

@Evandro

'top: 0;' e 'bottom: 0;' realmente não funciona =X

[Evandro Oliveira 331]

vou abrir o editor u.u

se conseguir a solução antes de 30 min, edito o post

[[VAZA] 0]

desculpe, eu me expressei mal.

Eu quis dizer: acima...e não em cima

[William Bruno 1501]

Cara, mas esse é o comportamento padrão de elementos nivel de bloco.

Qual é a situação real ?

[Desnickadu 0]

então você quer algo do tipo

<div id="div1">
      <div id="div2">
             conteudo 2
      </div>
      conteudo 1
</div>

[Meh 0]

Float não daria certo ? http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

 

5 usuário(s) está(ão) lendo este tópico

5 membro(s), 0 visitante(s) e 0 membros anônimo(s)

 

1. Meh,

2. Desnickadu,

3. William Bruno,

4. [VAZA],

5. Evandro Oliveira

 

 

[[VAZA] 0]

Desnickadu,

vamos dizer que nao teria como eu criar a div2 dentro da div1.

 

Eu dei um exemplo bem simples, mas como eu estou puxando dados de uma base de dados, o conteudo da div2, eu só consigo recuperar depois que recuperar todos os registros da div1

[Evandro Oliveira 331]

É isso ai, tem que usar hierarquia de divs mano... o colega respondeu certo ai...qualquer coisa da uma esturdada sobre o assunto para compreender melhor.

 

 

tá, e a solução do problema????

---

 

tentei com float, position abs, position rel, com e sem z-index e o resultado é o mesmo. Uma vez que você flutua o elemento filho, o elemento pai passa a ignorar suas medidas (altura e largura) o que impossibilita aplicar as mesmas propriedades aos elementos irmãos [siblings]

---

 

utilizei uma técnica no sexto menu do Repente pra solucionar um problema parecido, mas é JS =\

 

 

---

Ao pessoal que ta tentando ajudar mas não está entendendo: ele quer algo no estilo faux collumns.

Elementos irmãos flutuantes que sigam a mesma altura

[Desnickadu 0]

 

Desnickadu,

vamos dizer que nao teria como eu criar a div2 dentro da div1.

 

Eu dei um exemplo bem simples, mas como eu estou puxando dados de uma base de dados, o conteudo da div2, eu só consigo recuperar depois que recuperar todos os registros da div1

 

mas você vai mostrar os resultados na mesma pagina ?

mostra como ta fazendo essa consulta ou como ta imprimindo na tela

talvez o problema esteja no modo que você imprime isso

[William Bruno 1501]

 

eu quero que a DIV que esta sendo criada por ultima, fique em cima da div que esta sendo criada primeiro.

 

não consigo pensar em nenhuma solução apenas com CSS para isso.

Como é o server-side dessa situação ?

[[VAZA] 0]

Para entenderem melhor o que eu quero.

 

Tenho esse html:

<div id="div1">

Conteudo 1

</div>

 

<div id="div2">

Conteudo 2 <br/><br/>

</div>

 

Resultado:

 

Conteudo 2

 

Conteudo 1

 

Dai vamos supor que eu tenha mais conteudo na div2:

<div id="div1">

Conteudo 1

</div>

 

<div id="div2">

Conteudo 2 dsfdsfdsfddasdsdds<br/>

fsdfdsf dsfsdfsdfsdfsdf sdf sdfsdfdsfd sdf<br/>

sfdfsdfsdffsdfdsfsf sdfsdfsd<br/>

ddsfsfdfsdffsdffsddsfdfdsf sfdsfsd<br/>

<br/><br/>

</div>

 

Resultado:

Conteudo 2 dsfdsfdsfddasdsdds

fsdfdsf dsfsdfsdfsdfsdf sdf sdfsdfdsfd sdf

sfdfsdfsdffsdfdsfsf sdfsdfsd

ddsfsfdfsdffsdffsddsfdfdsf sfdsfsd

 

Conteudo 1

[William Bruno 1501]

Mostre como você faz a parte server-side. Certamente que com alguma linguagem de programação é mais fácil fazer isso.

 

A única forma de fazer isso apenas com CSS/HTML é criar a div2 primeiro.

[Meh 0]

Mas então pq você não coloca o conteúdo da DIV 2 na DIV 1 ? e fica tudo certo ? dai o conteúdo da div1 você coloca na 2 ?

se respondi errado, não entendi direito.. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Evandro Oliveira 331]

[vaza], confirma pra mim se é isso aqui que você quer, pelo menos foi o que eu entendi

[[VAZA] 0]

William Bruno,

Na div1, eu estou mostrando os registros da minha base de dados e enquanto mostro os registros, eu estou criando um array de resultados. portando, eu só consigo ter o valor total do array, depois que ter concluido de mostrar todos os registros.

Só que, os resultados do array, quero mostrar antes dos registros...entendeu?

 

Evandro...no html, estaria assim:

<div id="div1">

Conteudo 1

</div>

 

<div id="div2">

Conteudo 2

</div>

 

e quando visualizado no browser, fica assim:

|--------------------------|

| Conteudo 2 |

|--------------------------|

 

|--------------------------|

| Conteudo 1 |

|--------------------------|

[Public2004 79]

Também acho que a melhor forma é primeiro tratar esse ordenamente de acordo com o resultado do server-side...

 

Edit: Desculpe, vi a outra resposta agora... um display:none enquanto não carrega as outras infos não resolve

[William Bruno 1501]

Com CSS/HTML não é possivel !

 

Talvez com Javascript você consiga trocar os conteudos de lugar. Mas é como eu disse, e venho repetindo.. apenas com alguma linguagem de programação...