Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá a todos. Estou montando um layout onde tenho duas colunas (menu e texto) que necessariamente precisam ter a mesma altura. Gostaria, para isso, que esta altura fosse definida automaticamente pelo tamanho do maior conteúdo existente dentro delas. No Internet Explorer já consegui, porém no Firefox não está dando certo. Sei que é um problema recorrente, mas nas pesquisas que fiz algumas supostas soluções simplesmente não funcionam e outras creio que eu não tenha entendido bem. Já tentei utilizar o display:table também, sem sucesso. Abaixo o código:
<HTML><HEAD>
<STYLE type=text/css>BODY {
TEXT-ALIGN: center; BACKGROUND-COLOR: #FFFFFF; FONT: 14px verdana,helvetica,sans-serif
}
#global {
BACKGROUND-COLOR: #00FF00; WIDTH: 750px; HEIGHT: 200px
}
#topo {
TEXT-ALIGN: justify; DISPLAY: table; BACKGROUND-COLOR: #00FF00; MARGIN: 2px; WIDTH: 20%; HEIGHT: 100px
}
#geral {
HEIGHT:10px
}
#conteudo {
FLOAT: left; TEXT-ALIGN: justify; BACKGROUND-COLOR: #FF0000; WIDTH: 525px; HEIGHT:100%; MARGIN-LEFT: 1px; MARGIN-TOP: 1px; MARGIN-BOTTOM: -4px;
}
#conteudotop {
BACKGROUND-IMAGE: url(fundo3.gif); TEXT-ALIGN: justify; BACKGROUND-COLOR: #FF0000; WIDTH: 100%; HEIGHT: 35px; MARGIN-LEFT: 1px;
}
#conteudobmp {
BACKGROUND-IMAGE: url(fundo4.gif); TEXT-ALIGN: justify; BACKGROUND-COLOR: #FF0000; WIDTH: 100%; HEIGHT:100%; MARGIN-LEFT: 1px; MARGIN-BOTTOM: 5px; PADDING-LEFT: 15px
}
#esquerda {
TEXT-ALIGN: justify; BACKGROUND-COLOR: #FFFFFF; WIDTH: 219px; HEIGHT:100%; FLOAT: right; MARGIN-RIGHT: 2px; MARGIN-BOTTOM: 3px
}
#esquerdatop {
BACKGROUND-IMAGE: url(fundo1.gif); TEXT-ALIGN: justify; BACKGROUND-COLOR: #0000FF; WIDTH: 100%; HEIGHT: 38px; MARGIN-RIGHT: 1px
}
#esquerdabmp {
BACKGROUND-IMAGE: url(fundo2.gif); TEXT-ALIGN: justify; BACKGROUND-COLOR: #0000FF; WIDTH: 100%; HEIGHT:100%; MARGIN-RIGHT: 1px; PADDING-LEFT: 15px
}
</STYLE>
</HEAD>
<BODY>
<CENTER>
<DIV id=global>
<DIV id=topo><img src="topo.gif"></DIV>
<DIV id=geral>
<DIV id=conteudo>
<DIV id=conteudotop></DIV>
<DIV id=conteudobmp>teste<br>teste<br>teste<br>
teste<br>teste<br>teste<br>
teste<br>teste<br>teste<br>
teste<br>teste<br>teste<br>
teste<br>teste<br>teste<br>
teste<br>teste<br>teste<br>
teste<br>teste<br>teste<br>
teste<br>
</DIV>
</DIV>
<DIV id=esquerda>
<DIV id=esquerdatop></DIV>
<DIV id=esquerdabmp></DIV>
</DIV>
</DIV>
</DIV></CENTER></BODY></HTML>Alguém poderia, por favor, me ajudar nessa solução?
Obrigado.
Carregando comentários...