Thanks for input, unfortunately did not solve problem. In the end found an excellent little .js from yellowpencil.com which works across all browsers.
Graham -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Dion Sole Sent: Sunday, 8 May 2005 6:07 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Equal height column problem Graham wrote: > I know this has been covered many times before, but none seem to cover > my problem, here it is. > > > > I am managing a corporate-wide template where the main content is > divided into six 66px panels with a 10px spacing between each panel. > This permits the following layouts: > > 1 panel - 5 panel > > 2 panel - 2 panel - 2 panel > > 2panel 4 panel > > 3 panel - 3 panel > > > > My basic code comprises a containing div which has the inner divs > floating and the space between the divs modified by setting the right > margin in a spacer style as below > > <div> > > <div class="2panel spacer"></div> > > <div class="2panel spacer"></div> > > <div class="2panel"></div> > > </div> > > > > Everything works fine until a background is applied to the panel > classes as I can't get them to extend to the bottom of the containing > div in both IE and FFox etc. Depending on the method I have used it works in one or other. > > > > As you can see I can't just apply a background image to the containing > div as I will never know which panel configuration will be used and I > don't want the layout to be complicated by having multiple containing div classes. > Furthermore, it is planned that the next drop of the template will > allow the panels to scale in width depending upon browser width, so > you can see the problems this would cause using a background on the containing div. > > > > Any suggestions will be very welcome as I am desperately trying to get > the developers away from using tables to lay this out. > > > > Thanks > > > > Graham Cook > > > > ______________________________________________________________________ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by > evolt.org -- http://www.evolt.org/help_support_evolt/ > > It would be more helpful if you said what methods you have tried so far. The "proper" way to do it is to set the containing <div> element to have {height: auto; width: 100%; overflow: hidden;}. The relevant part of the spec is CSS2.1 sections 10.6.6 and 10.6.7. Basically, if you have a block-level non-replaced element (which your container <div> is), and it has any floating descendants, it's height should be extended to the bottom margin edge of those elements. The width declaration is needed for Windows IE and Opera. -- GPG key UID: 0xCED35690 GPG key fingerprint: 1243 C87E 521C 3A0A 3121 C4D6 5A10 AABE CED3 5690 ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
