Ir para conteúdo

POWERED BY:

Arquivado

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

Artur Loco

Alinhamento de div na parte inferior de outra div

Por , em Desenvolvimento frontend

Recommended Posts

Artur Loco    0

Artur Loco
Postado

Olá, estou com dificuldades para trabalhar com o posicionamento de divs. A dúvida é a seguinte:

 

O código tem uma div chamada #conteudo que tem todas as outras divs dentro.

Tem duas divs dentro do conteúdo: #a e #b que ocupam 50% da altura cada uma.

Dentro da div #b tem duas outras divs: #dadosB1 e #dadosB2.

 

A dúvida que fica é, como faço para posicionar as divs #dadosB1 e #dadosB2 na área inferior da div #b?

 

Se puderem ajudar, agradeço.

 

Segue o código:

<!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=iso-8859-5" />
<title>Untitled Document</title>


<style type="text/css">
html {height: 100%;}
body {margin:0; padding:0; height:100%;}
#conteudo {
       min-height:100%;
       height:100%;
       background-color: #F00;
       width: 300px;
}
#a {
       height:50%;
       background-color: #FF0;
       width: 300px;
}
#b {
height:50%;
background-color: #0F0;
width: 300px;
vertical-align: bottom;
}

/* Para Internet Explorer */
* html #conteudo {height:100%;}
#dadosB1 {
width: 200px;
background-color: #F60;
}
#dadosB2 {
width: 200px;
background-color: #9FF;
}
</style>
</head>

<body>
<div id="conteudo">

<div id="a">teste A</div>
<div id="b">
 <div id="dadosB1">Conteúdo dados B1</div>
 <div id="dadosB2">Conteúdo dados B2</div>  
</div>
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Artur Loco    0

Artur Loco
Postado

Já tentou usar margin-top até elas ficarem onde você que?

 

Então, não quero utilizar magin-top, pois pode acontecer de se a altura do browser mudar, as duas divs podem não colar na parte inferior.

Preciso que independentemente da altura do browser as duas divs fiquem sempre coladas na parte inferior da div B, entende?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

oi amigo, ai você terá que usar position: absolute; bottom: 0;

lembrando q o pai deve ter um relative ao menos.

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