[css-d] Background question...
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=headHeadheader/p pheader copy/p/div div id=content div id=leftNavpleft nav here/p /div div id=mainpmain 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 __ 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/
Re: [css-d] Background question...
Have you made leftNav and the main areas transparent? background-color: transparent; Rachel At 19:56 02/06/2010, 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=headHeadheader/p pheader copy/p/div div id=content div id=leftNavpleft nav here/p /div div id=mainpmain 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 __ 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/ __ 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/
Re: [css-d] Background question...
Ar 02/06/10 19:56, ysgrifennodd Michael Beaudoin : 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=headHeadheader/p pheader copy/p/div div id=content div id=leftNavpleft nav here/p /div div id=mainpmain 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 __ Heh! Yes it is - if I understand you correctly. Floats are not content in the same way as un-floated blocks are. So, your #page-wrap contains the #header, whose height is determined by the height of the two paragraphs it contains. You then have a #content div that follows the second paragraph but has no height at all because it has no non-floated content. Your floated divs float over this div and therefore display no background but their own. If you use Firefox's Web Developer's Toolbar and get it to outline block elements you'll see what I mean. Cheers Peter -- http://www.peredur.net __ 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/
Re: [css-d] Background question...
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=headHeadheader/p
pheader copy/p/div
div id=content
div id=leftNavpleft nav here/p /div
div id=mainpmain 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=headHeadheader/p
pheader copy/p
/div
div id=content
div id=leftNavpleft nav here/p /div
div id=mainpmain 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/
Re: [css-d] Background question...
At 19:56 02/06/2010, 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=headHeadheader/p pheader copy/p/div div id=content div id=leftNavpleft nav here/p /div div id=mainpmain 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 __ On Jun 2, 2010, at 2:03 PM, Rachel Mawhood wrote: Have you made leftNav and the main areas transparent? background-color: transparent; Rachel Aw crud. Totally forgot about that one. Will the content area expand with the leftNav and main div's? Or can it? Thanks. Michael __ 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/
