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
signature.asc
Description: OpenPGP digital signature
______________________________________________________________________ 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/
