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:
Pergunta
TNT
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.
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.