--- On Tue, 1/19/10, Alan Gresley <[email protected]> wrote:
> From: Alan Gresley <[email protected]>
> Subject: Re: [css-d] Width 100% Question - 3rd Attempt
> To: "Elli Vizcaino" <[email protected]>
> Cc: [email protected]
> Date: Tuesday, January 19, 2010, 8:29 PM
> 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/
>
Alan,
Thanks for your response it helped give me a better understanding as to why my
wrapper although set to width 100% was not "viewing" as 100% once the window
got resized. I went ahead and tried out some of your suggestions and what I
discovered was that whether I applied the overflow property to either the html,
body or wrapper container (which btw worked in having a 100% view of wrapper w
window resized) was that it removed the scroll bars from the browser window,
thus making it impossible for someone to view the site as intended. Basically
any one with a lower resolution than what I had set as my min-width would not
be able to see the complete site. So in this case, I realize I'm better off
setting min-width so folks can at least get scrollbars to view site if need be.
Unless you know of a way, that I can apply overflow hidden so my wrapper
stretches across window, whether resized or not and the scroll bars can remain
intact?
Elli
______________________________________________________________________
css-discuss [[email protected]]
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/
