Hi all This is my first post, any help will be greatly appreciated.
Im 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 dont want it thank you). I know about faux columns, but that doesnt allow me to play with the pseudo-left and pseudo-right columns border witdh, because we we dont 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 havent 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 Id like to avoid, and dont work fine cross browser). http://www.killersites.com/blog/?s=matching+column (.js and I havent 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). Im 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/
