Problemas com Float e Height de layout tableless
E ai galera, td bem, meu problema é o seguinte. Estou Fazendo Um layout simples em CSS e Tableless, so que acontece que estou usabdo eme em float nas divs de conteudo do meio, o problema e que quando defino float para elas as divs pais somem o height para tipo uns 5px, nao sei o que e, vou postar o codugo aqui.
index.tpl.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">{$site_title} | {$page_title}</title><link rel="stylesheet" type="text/css" href="../estilos/default.css" /></head><body><!--Page--><div id="page"> <!--Top--> <div id="top"> <h3>{$site_title}</h3> <h5>{$site_slogan}</h5> </div> <!--/Top--> <!--Middle--> <div id="middle"> <!--Left--> <div id="left"> <p>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <p>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <p>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <p>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <p>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> </div> <!--/Left--> <!--Center--> <div id="container"> {$container_conteudo} </div> <!--/Center--> <!--Right--> <div id="right"> </div> <!--/Right--> </div> <!--/Middle--> <!--Bottom--> <div id="bottom"> <p style="text-align:center;"><strong>{$footer_text}</strong></p> </div> <!--/Bottom--></div><!--/Page--></body></html>
default.css
/// - @File: Default.css// - @Description: Folha de Estilos Padrao do Site// - @Developer: Jonathan Cardozo < contato@jonathancardozo.com.br >// - @At: 09/11/2006// Tags / { padding: 1px; margin: 1px;}body { background: #EAEAEA; color: #000000; font-family: verdana, arial, sans-serif; text-align: center; font-size: 11px;}div {}/ /Tags // Layout /div#page { /position: relative;/ width: 90%; /margin: auto;/ margin-left: auto; margin-right: auto; /margin-top: 3px;/ text-align: left; background: #FFFFFF; border: 1px solid #999999; display: block;}div#top,div#middle,div#bottom { width: 100%;}div#top { border-bottom: 1px solid #999999; height: 50px;}div#bottom { border-top: 1px solid #999999;}div#middle div#left,div#middle div#container {}div#middle div#left { float: left; border-right: 1px solid #999999; width: 20%; height: 100%; overflow: hidden;}div#middle div#container { width: 70%; float: right; color: orange; }/ /Layout */
Quem puder me ajudar eu agradeço.
Discussão (1)
Carregando comentários...