I viewed your site in 1024x768 and main sections were misaligned and I did have to scroll horizontally. You won't want to leave it like that. All of the important stuff does fit within my screen, so you're fine with the widths. I would center all of the important stuff and then center the background image, and not force a width of 1600px (which will likely produce a scroll). The important stuff would be viewable down to 1024 without a horizontal scroll, they would just not see all of the background. Those with higher resolutions will see the rest of the background. So basically, fixed width and the amount of background shown will depend on the resolution of the user. Here is an example of a site that does this -> http://www.webdesignerwall.com/
On Wed, Jan 20, 2010 at 10:30 AM, Elli Vizcaino <elli...@yahoo.com> wrote: > --- On Tue, 1/19/10, Alan Gresley <a...@css-class.com> wrote: > >> From: Alan Gresley <a...@css-class.com> >> Subject: Re: [css-d] Width 100% Question - 3rd Attempt >> To: "Elli Vizcaino" <elli...@yahoo.com> >> Cc: cs...@css-discuss.org >> 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 [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/
