Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia galera!
Estou com uma dúvida iminete, eu havia questionado um professor meu em como posicionar div's dentro de outra div fazendo com o "height" da div "pai" cresça a medida que coloco outras div's dentro dela. Ele disse que não seria possível fazer isso usando a propriedade "position" e sim a "float". Poís bem, hoje fui botar em prática mas algo está dando errado.
Segue o código(é só um teste):
<!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=utf-8" />
<title>Untitled Document</title>
<style>width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background: #c17c7c;
}
#corpo{
width: 760px;
padding: 0px;
margin: 0 auto;
}
#banner{
position:relative;
top: 0px;
left: 0px;
width: 760px;
height: 190px;
background:#CCC;
}
#menu{
position:relative;
top: 0px;
left: 0px;
width: 760px;
height: 26px;
background:#760000;
}
#conteudo{
position: relative;
top: 0px;
left: 0px;
width: 760px;
background:#fff;
}
#rodape{
position: relative;
top: 0px;
left: 0px;
width: 760px;
height: 50px;
background: url(assets/bg-rodape.png);
background-position: center top;
background-repeat:no-repeat;
}
#sombra-rodape{
position: relative;
top: 0px;
left: 0px;
width: 760px;
height: 50px;
background: url(assets/sombra-rodape.png);
background-position: center top;
background-repeat:no-repeat;
}/ Index /
#box1{
float: left;
width: 450px;
height: 150px;
margin: 20px 0px 0px 20px;
background:#ddd;
}
#box2{
float: right;
width: 250px;
height: 320px;
margin: 20px 20px 20px 0px;
background:#ddd;
}
#box3{
float: left;
width: 450px;
height: 150px;
margin: 20px 0px 0px 20px;
background:#ddd;
}</style>
</head>
<body>
<div id="corpo">
<div id="banner">
</div>
<div id="menu">
</div>
<div id="conteudo">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
</div>
<div id="rodape">
</div>
<div id="sombra-rodape">
</div>
</div>
</body>
</html>Pelo o que eu entendi pela explicação dele, o "height" da div conteudo deveria acompanhar o tamanho ocupado pelos box's mas isso não está acontecendo.
Esse é o resultado:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img844.imageshack.us/img844/6484/testeerro.jpg&key=ee34a0102d022a6471c5b78bba17e4d606b77c64a3e2478c7fa8fca51c4394c1" alt="testeerro.jpg" />
Essa era minha espectativa(obtive o resultado declarando o height da div conteudo):
/applications/core/interface/imageproxy/imageproxy.php?img=http://img7.imageshack.us/img7/487/testeespc.jpg&key=e780078f5fa7c1f417bb72d79488bcdd2f6d77f6f5b7f1a44ad3aff3f3eea284" alt="testeespc.jpg" />
Vocês podem questionar: aaa, mas porque você só não define o height da div conteudo e pronto.
É, nesse caso eu poderia sim definir mas estou querendo aprender a fazer um layout mais "livre" onde eu não precise declarar um height diferente pra mesma div a cada paágina que eu crio.
Se souberem como resolver o problema me ajudaria muito!
Desde já agradeço ;)
Obrigado e tenham um bom dia.
Carregando comentários...