[Resolvido] div's uma em cima e a outra em baixo como fazer?

[lorena85 1]

Pessoal como faço para que a div texto fique em cima e a div link fique embaixo??

 

veja o código

 

CSS

.box{width:150px; 
min-height:50px;
background-color:#3300CC;}

.texto{width:150px; 
height:10px;
background-color:#FF00FF;
}

.link{width:150px; 
height:10px;
background-color:#FFFF00;
}

 

 

HTML

<div class="box">
 <div class="texto"></div>  
 <div class="link"></div>
</div>

 

no codigo de cima a div texto e link ficam em cima!

[Dian Carlos 29]

pelo que eu entendi você quer que a div texto fique fixa do topo e a outra fique fixa no rodapé..

 

Se for isso, é so você deixar seu código assim.

 

.box{

position: relative;

width:150px;

min-height:50px;

background-color:#3300CC;}

 

.texto{

position: absolute;

width:150px;

height:10px;

background-color:#FF00FF;

top: 0px;

}

 

.link{

position: absolute;

width:150px;

height:10px;

background-color:#FFFF00;

bottom: 0px;

}

[Marcos Xavier 189]

Faça alguns testes aí.

 

.texto{width:150px; height:10px;}
.link{width:150px; height:10px;padding-top:20px;}

Existem várias maneiras de se posicionar um elemento,porém cada caso

é um caso.

[lorena85 1]

pelo que eu entendi você quer que a div texto fique fixa do topo e a outra fique fixa no rodapé..

 

Se for isso, é so você deixar seu código assim.

 

.box{

position: relative;

width:150px;

min-height:50px;

background-color:#3300CC;}

 

.texto{

position: absolute;

width:150px;

height:10px;

background-color:#FF00FF;

top: 0px;

}

 

.link{

position: absolute;

width:150px;

height:10px;

background-color:#FFFF00;

bottom: 0px;

}

 

 

Ok Dian Carlos ficou uma posicionada no seus devido lugar a div texto em cima e a div link em baixo

 

porem quando é colocado algum texto na div texto ela fica assim! veja abaixo

 

queria que ela ficasse assim quando o texto fosse muito grande exemplo:

[Wanderson Valerio 102]

.texto{width:150px; 
  height:10px;
  background-color:#FF00FF;
  position: relative;
  z-index: 5;
}

Se o problema persistir, aumente o valor da propriedade `z-index`

[Marcos Xavier 189]

@Wanderson

 

.texto{width:150px; 
  height:10px;
  background-color:#FF00FF;
  position: relative;
  z-index: 5;
}

Isso não rsolverá o problema mas sim renderizará .text por cima

dos elementos que tiverem z-index < 5.

 

 

queria que ela ficasse assim quando o texto fosse muito grande exemplo:

 

@Lorena Ribeiro,nesse casso coloque :

texto{
position: absolute;
width:150px;
height:auto;
background-color:#FF00FF;
top: 0px;
}

height:auto redimensionara de acordo com o conteudo.

 

Para esconder o conteudo extra:

overflow:hidden;

[lorena85 1]

@Wanderson

 

.texto{width:150px; 
  height:10px;
  background-color:#FF00FF;
  position: relative;
  z-index: 5;
}

Isso não rsolverá o problema mas sim renderizará .text por cima

dos elementos que tiverem z-index < 5.

 

 

 

@Lorena Ribeiro,nesse casso coloque :

texto{
position: absolute;
width:150px;
height:auto;
background-color:#FF00FF;
top: 0px;
}

height:auto redimensionara de acordo com o conteudo.

 

Para esconder o conteudo extra:

overflow:hidden;

@Marcos Xavier não entendi aonde colocar o overflow:hidden;

 

post para mim o codigo html e css todo para eu entender melhor

[Marcos Xavier 189]

@Marcos Xavier não entendi aonde colocar o overflow:hidden;

 

post para mim o codigo html e css todo para eu entender melhor

Não tem a ver com o problema, só postei com a intenção

de incentivar a pesquisa :thumbsup: .

 

Contudo vai o código:

.box{
position: relative;
width:150px;
min-height:50px;
height:auto;
background:#3300CC;
}

.texto{
position: absolute;
width:150px;
height:auto;
background:#FF00FF;
top: 0;
}

.link{
position: absolute;
width:150px;
height:auto;
background:#FFFF00;
bottom: 0;
}
</style>
<div class="box">
 <div class="texto">texto</div>  
 <div class="link">link</div>
</div>

Porém não se limite ao que a galera posta.Veja o código,analise,modifique,teste o que postamos aqui.

att

[lorena85 1]

Não tem a ver com o problema, só postei com a intenção

de incentivar a pesquisa :thumbsup: .

 

Contudo vai o código:

.box{
position: relative;
width:150px;
min-height:50px;
height:auto;
background:#3300CC;
}

.texto{
position: absolute;
width:150px;
height:auto;
background:#FF00FF;
top: 0;
}

.link{
position: absolute;
width:150px;
height:auto;
background:#FFFF00;
bottom: 0;
}
</style>
<div class="box">
 <div class="texto">texto</div>  
 <div class="link">link</div>
</div>

Porém não se limite ao que a galera posta.Veja o código,analise,modifique,teste o que postamos aqui.

att

 

bem pelo o codigo que você me passou a div 'link' fica fixa e a div 'texto' ultrapassar ela!! como fazer que a div 'link' desça junto com a div 'texto'?!

[Marcos Xavier 189]

@Lorena.

Se você manter a '.box' com a altura minima de 50px,pode colocar

como abaixo. Porém se aumentar para mais de 50px a '.link' terá que

alterar a margin-top.

Coloque mais texto na .texto e .link para testar.

 

.box{
position: relative;
width:150px;
min-height:50px;
height:auto;
background-color:#3300CC;
border:1px #111 solid;}

.texto{
width:150px;
height:auto;
background-color:#FF00FF;
margin-top:0;
}

.link{
width:150px;
height:auto;
background-color:#FFFF00;
margin-top:20px;
}
</style>
<div class="box">
 <div class="texto">text<br>text<br>text<br>text<br></div>  
 <div class="link">link<br>link<br>link<br>link<br>link<br></div>
</div>

[lorena85 1]

Agora ficou do geito que queria Alelulia :clap:

E ainda resolvi o problema da porcaria do Internet Explore tem quer atribuir esse valor no css

html>body .box {
height: auto;
}

 

o código ficou assim:

 

<style type="text/css">
.box {
min-height:100px;
height:100px;
position: relative;
width:150px;
background-color:#3300CC;
border:1px #111 solid;
}

html>body .box {
height: auto;
}

.texto{
position:relative;
width:150px;
height:auto;
background-color:#FF00FF;
margin-bottom:20px;
}

.link{
width:150px;
height:20px;
background-color:#FFFF00;
position:absolute;
bottom:0;
}
</style>
    <div class="box">
             <div class="texto">s fsddsf sdfdsf fsd fsd s jjkljkl s fsddsf sdfdsf fsd fsd s jjkljkl s fsddsf sdfdsf fsd fsd s jjkljkl s fsddsf sdfdsf fsd fsd s jjkljkl </div>  
             <div class="link">link</div>
    </div>

 

Agradeço a ajuda de todos :thumbsup: