Michael Beaudoin wrote: > Thanks to all for the help, but this one is escaping me... > > I have the following div's: > > <div id="page-wrap"> > <div id="header"> > <p class="headHead">header</p> > <p>header copy</p></div> > > <div id="content"> > <div id="leftNav"><p>left nav here</p> </div> > <div id="main"><p>main content here</p></div> > </div> > </div> > > and I would like a background behind the content area, but when I put > it in the page-wrap, it won't show behind the leftNav and main areas. > > The leftNav is floated left, and the main is floated right. > > What am I missing? I'm sure it's head-slapping simple. > > Thanks, > Michael
Hello Michael, Yes it could possibly be somewhat simple. Create a 'block formating context' to contain those two floats. For good browsers, use this (including IE7). #page-warp {overflow: hidden;} For IE6-, use this. * html #page-warp {height: 1%;} /* IE6 hasLayout trigger */ Another way is to insert a clearing div. <div id="page-wrap"> <div id="header"> <p class="headHead">header</p> <p>header copy</p> </div> <div id="content"> <div id="leftNav"><p>left nav here</p> </div> <div id="main"><p>main content here</p></div> </div> <div><!-- clearing div --></div> </div> The HTML comment will hopefully avoid a IE6 bug. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] 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/