Hi, I've created the following to have "full equal height columns" in every browser. Wanna take a look: <!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" lang="pt" xml:lang="pt"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #container { background-color: gray; } #header { height: 40px; border: 1px solid red; } #middle { border:1px solid black; display: table-row; /* a width vai ser igual รก soma das widths das celulas */ _display:block; background-color: red; } #content { width: 300px; border: 2px solid red; display: table-cell; _float:left; _display:block; _height: expression(lc1.offsetTop > lc2.offsetTop ? lc1.offsetTop : lc2.offsetTop); } #right-blocks { width: 150px; border: 2px solid blue; display: table-cell; _float:left; _display: block; _height: expression(lc1.offsetTop > lc2.offsetTop ? lc1.offsetTop : lc2.offsetTop); } .clear { clear:both; display: none; border: 1px solid red; _display: block; } #lc1, #lc2 { border: 1px solid brown; height: 1px; width: 150px; font-size: 0px; } </style> </head> <body> <img src="http://www.largeformatphotography.info/qtluong/cathedralrocks.big.jpeg" /> <div id="container"> <div id="header"> <p>header</p> </div> <div id="middle"> <div id="content"> <p>content</p> <div style="height:150px;border:1px solid yellow;"></div> <div id="lc1"></div> </div> <div id="right-blocks"> <p>blocos</p> <div style="height:75px;border:1px solid yellow;"></div> <div id="lc2"></div> </div> <div class="clear"></div> </div> </div> </body> </html> Regards, Fernando Silva On 7/10/06, Sanduhrs <sanduhrs@audiens.de> wrote:
Am Montag, 10. Juli 2006 18:15 schrieb Frando (Franz Heinzmann):
That might be true, but as far as I can see only the part that makes the 3 columns have the same height is concerned. The rest of the "holy grail" css (the 3 columns) is still working. Equal heights are normally only needed if the columns need to have a different background that has to reach until the bottom of the page. Yes, that's true, only the equal-height part seems to be affected. But that is what it's all about and what makes this "grail" holy. Or am I wrong?
regards, frando
Sanduhrs schrieb:
Am Montag, 10. Juli 2006 16:55 schrieb Frando (Franz Heinzmann): [...]
For instance, [1] did so far always work for me.
The article on ALA describes a method which doesn't work anymore because of several reasons you may read about here http://positioniseverything.net/articles/onetruelayout/appendix/equalheig htproblems
I think we should try to get it working only with css, and if everything fails, a table layout is constructed in not even an hour.
regards, frando