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/

Reply via email to