Width 100% not working

[MadMad]

I can't for the life of me figure this one out, any help is much appreciated. I've got a footer div that I've given a color of black to. I just want it to span 100% of the width of the site. It looks fine when the browser is at its normal size, but when I shrink the browser smaller and scroll horizontally, the div is not 100%, and nothing is centered.

Here is the CSS:

#footer	{
	background-color: #0d0000;
	width:100%;
	height:50px;
}

The site it's on is http://www.individuallywrappedgourmet.com and you'll also see the same thing happening with my navbar at the top.
Iphone viewing is giving me the same problem, and nothing is centered. Anyone have any tips?

much appreciated.

[msevrens]

Width: 100% sets the width to the width of the window, so when you scroll horizontally, you would expect that it wouldn't extend beyond the page. Note that if you shrink the window, but then scroll over and then expand the window, though it wont reach the side of the page, it will still expand to be the size of the window.


You don't actually need to set a width since div's are block and block elements automatically default to 100% of their containing element unless a width is specified. So if the #footer is a descendant of the html or body elements, which it is, as long as no other parent element has a set width, it should extend to the full width of the content of the page.

[MadMad]

It doesn't have a parent element and I've removed the set width, and it still isn't working. Its driving me crazy. I'll keep at it and post the fix if I can figure it out.

[AndrewGSW]

I seem to recall reading that if you set a block element to 100% width you also need to set the body and html (and any parent elements of your element) to 100% width if you wish it to fill the viewport width.

I noticed that your css has html listed with numerous other selectors. You could add a separate css rule for it underneath those:

html { width: 100% }

Andy.

[amitsh]

add one more div around ur footer div

like

<div id="footerwrapper">
<div id="footer">---- content goes here ---- </div>
</div>

use ur #footer style to #footerwrapper (no need to use background-repeat)

and use below style for ur #footer

#footer {
background: same as footerwrapper;
height: same as footerwrapper;
margin: 0 auto;
width: same as ur content or any det u like, but u got to give it if u r giving width in ur content or anywhere in ur layout or use 960px which is ur container_12 is to check;
}

use background positioning center/middle, if u r using image as background, in both divs...

but here is a catch, u will be restricted with dis method as ur footer will be placed inside some width...

so if u want ur footer starts from one end to another end in any size browser is resized... u r outta luck in det case i have been looking for det solution for some last 5 or so years n sill outta luck

width: 100% wont work in any container block if ur using width in px in any one container block in ur layout (i belive ur clear what i mean by container block)

for clear just remove background images from ur header n u will c ur nav bar is not also 100% wide...

regards

[MadMad]

Thanks for all of your help, I've realized that happens to every site when you shrink it down, so there isn't a fix, and it's not a big issue. However, I'm still stuck on the issue of my website not centering on the iPhone. The footer and the navbar doesn't extend to the end. Ive used the 960 gs before and haven't had this issue.