[development] Re: Patches

Mon Jul 10 19:17:51 UTC 2006

Am Montag, 10. Juli 2006 20:23 schrieb Fernando Silva:
> Hi,
>
> I've created the following to have "full equal height columns" in every
> browser. Wanna take a look:
Nice image ;)
Do you have a template with 3 "full equal height columns" ?

>
> <!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 at 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/equal
> > > >heig 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
> > > >>
> > > >> [1] http://alistapart.com/articles/holygrail