[development] Re: Patches

Mon Jul 10 18:23:16 UTC 2006

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