Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Width 100% not working

    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:
    Code:
    #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.

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    42
    Thanks
    5
    Thanked 4 Times in 4 Posts
    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.
    Last edited by msevrens; 04-30-2011 at 07:28 PM.

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    Apr 2011
    Location
    New Delhi, India
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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

  • #6
    New Coder
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •