Elli Vizcaino wrote: > 3rd attempt not sure why my email isn't coming through to this group. > > Hello Gang, > > I have the main wrapper of a site I'm coding set to width: 100% it contains a > background image that repeats across width of page (repeat-x). However I > notice that when I resize the viewport the wrapper's background only goes > across to the width of the resized window and any containers set to a > specified width within it, then look off. > > If I set a min-width to the wrapper then everything looks fine. I am > wondering why min-width has to be set in order for the main wrapper to > stretch across the viewport. I thought setting it to 100% would take care of > that just the way a background image set to repeat-x on the body element > does, no matter what size the viewport is. > > For an idea of what I'm talking about, go here: > http://keithkemper.net/html/index.html and resize your window. > > > TIA, > Elli
Hello Elli, Ok, take a look at this page (testing something else), <http://css-class.com/test/css/bidi/visible-overflow-containing-block-ltr.htm> which has a white background on <body> and blue background on the <html>. This is normal for XHTML. Since from the specs on overflow [1] has this. "UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'." In layman terms, the <body> is the *initial containing block* for the wrapper. When you resize the window, the wrapper element overflows the <body> element into the HTML. So the 100% declared on the wrapper is still 100% of the width of the <body> element. This leaves you with two simple choices. You may need to check which works better the your page. #kk_main_wrapper { float:left; } or body { float:left; } On my test page, this works with the later. 1. <http://www.w3.org/TR/CSS21/visufx.html#overflow> -- Alan http://css-class.com/ ______________________________________________________________________ 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/
