sauloviniciusf 0 Denunciar post Postado Janeiro 23, 2012 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> /* Layout */ body{ 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; } /* Fim Layout */ /* 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; } /* Fim Index */ </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: Essa era minha espectativa(obtive o resultado declarando o height da div conteudo): 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. Compartilhar este post Link para o post Compartilhar em outros sites
Diéssica 140 Denunciar post Postado Janeiro 23, 2012 Bah, não entendi muito.. Mas pode tentar assim na div: overflow:auto; overflow:hidden; height:100%; (Testa com um de cada vez) :seta: http://www.w3schools.com/cssref/pr_pos_overflow.asp Compartilhar este post Link para o post Compartilhar em outros sites
sauloviniciusf 0 Denunciar post Postado Janeiro 23, 2012 overflow: auto; Funcionou, muito obrigado! :D Compartilhar este post Link para o post Compartilhar em outros sites
