Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal,
Estou com um problema que mesmo depois de 2 dias de pesquisas eu não consegui resolver.
O problema é o seguinte:
Tenho um DIV com outros 3 DIVs dentro. Esse 3 divs internos são flutuantes.
O div central fica com o texto e os outros 2 estão ali para se criar um efeito de margem com imagens.
O texto aumenta a altura do div central sem problemas, porém eu gostaria que os outros 2 divs acompanhassem esse div.
Pensei em colocar a altura destes 2 divs em 100% e pra minha surpresa os 2 divs laterais somem quando faço isso.
Se eu coloco position: absolute nestes 2 div eles reaparecem, mas ultrapassam todos os objetos abaixo deles na página.
Se eu não declarar o position e colocar uma altura fixa, os 2 divs se comportam normalmente, gerando o resultado desejado.
Alguém sabe a solução para este problema.
Vou postar abaixo o código para que vocês possam analisar.
Os divs que apresentam o problema são #BordaUtilEsq e o #BordaUtilDir; Eles estão dentro do div #AreaUtil, juntamente com o div #AreaTexto.
Este é o HTML:
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="ESTILOS/LAYOUT/base.css" rel="stylesheet" media="all" type="text/css" />
<link href="ESTILOS/LAYOUT/menuprincipal.css" rel="stylesheet" media="all" type="text/css"/>
<link href="ESTILOS/tabelas.css" rel="stylesheet" media="all" type="text/css" />
<title></title>
</head>
<body>
<div id="Container">
<div id="Topo">
<div class="Centralizador">
<img src="IMAGENS/LAYOUT/logo.png" alt="" id="Logo" title="" />
<div id="Backlog">
<h4>/#Backlog</h4>
<table class="Tabela" rules="groups" frame="void">
<thead>
<tr> <th class="esq">Item</th> <th class="dir">Pendências</th> </tr>
</thead>
<tbody>
<tr> <td class="esq">Feedback</td> <td class="dir">4</td> </tr>
<tr class="Alt"> <td class="esq">Apontamento</td> <td class="dir">65</td> </tr>
<tr> <td class="esq">Faltas não justificadas</td> <td class="dir">6</td> </tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="BarraCaminho">
<div class="Centralizador">
Início >> Cadastro de Profissionais
</div>
</div>
<div id="Corpo"><!-- DIV DO CONTEÚDO DA PÁGINA-->
<div class="Centralizador"><!-- CENTRALIZA O CONTEÚDO, SENDO UMA CLASSE BASTA UMA ALTERAÇÃO PARA QUE TODOS OS OBJETOS COM ESSA CLASSE SE ALTEREM -->
<!-- O CONTEÚDO DEVE FICAR AQUI-->
<div id="BarraMenu">
<h3>Cadastro de Profissionais</h3>
<ul id="MenuPrincipal">
<li><a href="#">Inclusão de novos profissionais</a></li>
</ul>
</div>
<div id="AreaUtil">
<div id="BordaUtilEsq"><img src="IMAGENS/LAYOUT/cantoutilsupesq.png" alt=""/></div>
<div id="AreaTexto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit varius felis a condimentum. Quisque cursus tempor justo non porta. Praesent mauris sem, lacinia et mollis id, porta a elit. Pellentesque mattis ultricies sem quis dignissim. Integer ligula arcu, vehicula feugiat rutrum sit amet, tempus sed magna. Aenean pretium ornare enim convallis sagittis. Sed sit amet tellus nec sapien ornare bibendum a lobortis mi. Aenean dignissim ligula in dui placerat sed sodales nulla commodo. Quisque lobortis nunc vel lacus accumsan mattis fringilla tortor adipiscing. Sed faucibus imperdiet erat eu dignissim. Nunc ac felis odio. Sed iaculis, sem id ultrices feugiat, nisl erat posuere ligula, eu tristique nunc eros quis sapien. Donec fringilla elit in sapien sollicitudin vel luctus urna elementum. Integer dignissim laoreet condimentum. Etiam sagittis mauris blandit neque commodo mattis. Nullam viverra massa sit amet quam faucibus eleifend. Cras sollicitudin dictum tellus nec cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<p/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit varius felis a condimentum. Quisque cursus tempor justo non porta. Praesent mauris sem, lacinia et mollis id, porta a elit. Pellentesque mattis ultricies sem quis dignissim. Integer ligula arcu, vehicula feugiat rutrum sit amet, tempus sed magna. Aenean pretium ornare enim convallis sagittis. Sed sit amet tellus nec sapien ornare bibendum a lobortis mi. Aenean dignissim ligula in dui placerat sed sodales nulla commodo. Quisque lobortis nunc vel lacus accumsan mattis fringilla tortor adipiscing. Sed faucibus imperdiet erat eu dignissim. Nunc ac felis odio. Sed iaculis, sem id ultrices feugiat, nisl erat posuere ligula, eu tristique nunc eros quis sapien. Donec fringilla elit in sapien sollicitudin vel luctus urna elementum. Integer dignissim laoreet condimentum. Etiam sagittis mauris blandit neque commodo mattis. Nullam viverra massa sit amet quam faucibus eleifend. Cras sollicitudin dictum tellus nec cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<p/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit varius felis a condimentum. Quisque cursus tempor justo non porta. Praesent mauris sem, lacinia et mollis id, porta a elit. Pellentesque mattis ultricies sem quis dignissim. Integer ligula arcu, vehicula feugiat rutrum sit amet, tempus sed magna. Aenean pretium ornare enim convallis sagittis. Sed sit amet tellus nec sapien ornare bibendum a lobortis mi. Aenean dignissim ligula in dui placerat sed sodales nulla commodo. Quisque lobortis nunc vel lacus accumsan mattis fringilla tortor adipiscing. Sed faucibus imperdiet erat eu dignissim. Nunc ac felis odio. Sed iaculis, sem id ultrices feugiat, nisl erat posuere ligula, eu tristique nunc eros quis sapien. Donec fringilla elit in sapien sollicitudin vel luctus urna elementum. Integer dignissim laoreet condimentum. Etiam sagittis mauris blandit neque commodo mattis. Nullam viverra massa sit amet quam faucibus eleifend. Cras sollicitudin dictum tellus nec cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
<div id="BordaUtilDir"><img src="IMAGENS/LAYOUT/cantoutilsupdir.png" alt=""/></div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div><!--DIV QUE IMPEDE DO TEXTO PASSAR POR BAIXO DO RODAPE-->
</div><!-- FIM DO DIV CORPO-->
<div id="Rodape"></div>
</div>
</body>
</html>Este é o CSS
/CONFIGURANDO OS OBJETOS PRINCIPAIS /
html,body{
height:100%;
}
#Container{
min-height:100%;
position:relative;
}
#Corpo{
padding-bottom:220px;/*ALTURA DO RODAPE*/
}
#Rodape{
position:absolute;
bottom:0;
height:220px;
width:100%;
}
.clear{
clear:both;
} margin:0;
padding:0;
} background-color:#f1f4fb;
font-family:Arial, Helvetica, sans-serif;
font-size:11pt;
}
#Topo{
background-image:url('../../IMAGENS/LAYOUT/bgtopo.png');
background-repeat:repeat-x;
height:102px;
border-bottom:7px solid #4e72ac;
} float:right;
color:#FFFFFF;
font-size:small;
width:320px;
margin-top:10px;
} float:left;
margin-right:20px;
} margin-top:20px;
}
#BarraCaminho{
font-size:12px;
float:left;
height:26px;
width:100%;
background-image:url('../../IMAGENS/LAYOUT/bgbarracaminho.png');
line-height:25px;
border-bottom:2px solid #d5d5d5;
}
.Centralizador{
width:960px; /*LARGURA DA PÁGINA */
margin:0 auto;
height:inherit;
}
#AreaUtil{
background:#FFF;
background-image:url('../../IMAGENS/LAYOUT/bordautiltopo.png');
background-position:top left;
background-repeat:repeat-x;
} float:left;
height:100%;
width:6px;
background-image:url('../../IMAGENS/LAYOUT/bordautilesq.png');
background-position:top left;
background-repeat:repeat-y;
} width:905px;
margin:10px 10px 0px 10px;
float:left;
} float:right;
height:100%;
width:5px;
background-image:url('../../IMAGENS/LAYOUT/bordautildir.png');
background-position:top left;
background-repeat:repeat-y;
}
#BarraMenu{
width:100%;
height:100px;
margin-top:4px;
margin-left:10px;
} line-height:40px;
}
#Rodape{
background-image:url('../../IMAGENS/LAYOUT/bgrodape.png');
background-repeat:repeat-x;
}Carregando comentários...