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/
