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/

Reply via email to