Well its seems that your .js is really nice. I will give it a try, if I'm unable to use this pure css solution.
BTW, my problem as a solution: , we just need to add this: padding:0px 0px 10000px 0px; margin:0px 0px -10000px 0px; on the #centre part of the css code. If the contend of one of the three columns is longer than 10000px, we will see inconsistencies on the layout. We just need to get the maximum possible value there, and hope the content never gets that big. :s Its a more or less solution... let's say. Thanks once again, Talofo -----Original Message----- From: Nancy Johnson [mailto:[EMAIL PROTECTED] Sent: quarta-feira, 29 de Outubro de 2008 16:05 To: MEM Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] help: three columns with the same height I chose javascript method http://www.paulbellows.com/getsmart/balance_columns/ You can see on my site: http://www-odi.nhtsa.dot.gov/ewr/names.cfm http://www-odi.nhtsa.dot.gov/includes/equalheight.js Nancy On Wed, Oct 29, 2008 at 11:41 AM, MEM <[EMAIL PROTECTED]> wrote: > Hi all > > This is my first post, any help will be greatly appreciated. > > I'm a CSS total newbie, so please, have patience. > > > > Ok. Yes I know this is the old table design déjà vu and we must avoid it > etc etc > > I know we maybe have a .js solution (I don't want it thank you). > > I know about faux columns, but that doesn't allow me to play with the > pseudo-left and pseudo-right columns border witdh, because we we don't have > them. So > > I also have seen: > > > > http://pmob.co.uk/temp/3colfixedtest_explained.htm (too much hacks) > > > > http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/ > (aaah . it haven't work) > > > > http://www.sitepoint.com/newsletter/viewissue.php?id=3 > <http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=70> &issue=70 > (uses a .js method that I'd like to avoid, and don't work fine cross > browser). > > > > http://www.killersites.com/blog/?s=matching+column (.js and I haven't found > where is the complete and recent post on this). > > > > http://www.alistapart.com/articles/multicolumnlayouts (and this one, may be > very nice, but, has no REAL borders, the autor have use them for the > layout). > > > > > > > > I'm looking for a simple 3 columns with the same height solution with a > footer and a header in CSS only. > > > > > > Here is what I have so far from here > http://www.htmlsource.co.uk/3-equal-columns-with-a-fixed-width-layout-using- > css/ : > > > > the body: > > > > <body> > > > > <div id="header">HEADER</div> > > > > <div id="container"> > > <div id="leftSide">This is some text some text</div> > > <div id="centre">This is some text This is some text This is some > text </div> > > <div id="rightSide">This is some text This is some text This is some > text This is some text </div> > > </div> > > > > <div id="footer">FOOTER</div> > > > > </body> > > > > > > The CSS: > > > > <style> > > > > #header, #footer { > > width:770px; > > margin:0px auto 0px auto; > > height:50px; > > background-color:#dedede; > > } > > > > #leftSide, #rightSide { > > width:150px; > > } > > > > #leftSide { > > float:left; > > background-color:blue; > > padding:0px 0px 1000px 0px; > > margin:0px 0px -1000px 0px; > > } > > > > #rightSide { > > float:right; > > background-color:red; > > padding:0px 0px 1000px 0px; > > margin:0px 0px -1000px 0px; > > } > > > > #container { > > width:770px; > > margin:0px auto 0px auto; > > overflow:hidden; > > } > > > > #centre { > > width:470px; > > float:left; > > background-color:green; > > } > > > > #footer { > > clear:both; > > } > > > > </style> > > > > > > > > The problem: > > The background of the #center does not follow the height of the highest > column. How can we make it do it and work cross-browser? > > > > > > > > > > Thanks, and PLEASE, I really need some feedback on this. > > > > Talofo > > ______________________________________________________________________ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
