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.
Pois é, mas mesmo no tutorial deste link que me passou dá erro. Veja o link:
http://conteudo.imasters.com.br/4462/layout-2colunas-ex10.html
OK, no servidor fica exatamente como eu preciso. Mas tente salvar esse arquivo em html e rodar do próprio computador. Misteriosamente a coluna da direita não se ajusta a altura da direita. Eu não estou me dando conta do por que isto acontece..
Well...
analisei o CSS e ele está um pouco "feio". Se você quer que as colunas se igualem, não há motivos para setar o height.
De uma estuda sobre as propriedades CSS.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Claro que está feio, depois de tudo que eu mexi nele tentando consertar.. O próprio height só setei por que sem ele não funcionava nem no Internet Explorer.
Mas e o CSS do link anterior, por que ele funciona no servidor e não funciona na máquina? Não vejo motivo aparente para que isto aconteça. Existe uma explicação?
Pode postar o link?
Use um DocType. ;)
Bom, upei o arquivo para que veja então:
http://subhumanos.freefronthost.com/teste.html
Mas se puder me dar uma luz quanto ao problema do link do exemplo, também me serve.
Obrigado.
Aqui está igual, como se fosse local. http://forum.imasters.com.br/public/style_emoticons/default/yes.gif :(
O arquivo que digo que fica diferente é o do link que você me passou como exemplo, não o meu:
http://conteudo.imasters.com.br/4462/layout-2colunas-ex10.html
Indo em arquivo/salvar e salvando a página como *.html, acontece o mesmo erro do que com o meu site: as barras não ficam do mesmo tamanho. Pelo menos aqui em casa é o que está ocorrendo.
Mas tudo bem, verei o que fazer aqui.
Obrigado.
Se puder postar o link seria melhor.
Olhe esse » http://imasters.com.br/artigo/4462/css/layout_css_de_2_colunas_com_faux_column/