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/
