SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem with horizontal scrolling

    Hi there,
    I am having a tiny horizontal scrolling problem (you can barely see it but it's driving me mad) can anyone work out how to fix it?

    Site is here : http://www.ncmag.co.uk

    Thanks in advance,
    James

  2. #2
    SitePoint Member
    Join Date
    Nov 2007
    Location
    Olympia, WA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like it's the html/body margin that is combining with the footer 10px left padding to create that. Not sure why yet, I'll try and take a closer look as time allows.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Set the width of content and footer to 98%

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey John, I tried that and it broke the design... i don't think i should have to do that... surely there is a better solution? That method seems a bit messy.

    Thanks, James

    Thanks for the other reply Bruce!

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looked fine when I set the padding of #content to 0px and #footer to 0px

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure I should help seeing as I spent ages on fixing your footer and you haven't replied or implemented the code I gave you

    The scrollbar problem is that you have set your content and your footer to 100% width and then added padding as well. 100% is as big as you can be - you can't add anything to it without it being bigger than its parent.

    Remove the widths as they are not needed anyway.

    Code:
    #content {
     /* width: 100%;*/
      padding: 5px 0 0 5px;
      height:600px;
    background: url("http://www.ncmag.co.uk/blog/images/topbg.png") repeat-x;
    }
    #footer {
    /*width:100%;*/
    position: relative;
      height: 400px; 
      color:#FFFFFF;
      margin: 400px 0px 0px 0px;
      bottom:1px;
      padding: 10px 0px 10px 10px;
      background-color:#222222;
    clear: both;
    }
    I am reluctant to give more advice because as I mentioned before that page has serious issues and unless you address them now you will spend your life asking for help in the forums.

  7. #7
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there problem was solved by some heavy remodeling of the CSS and by removing the 'width 100%' from the footer. Thanks for all the feedback and a special thanks to Paul o'B!
    Cheers guys,
    James


Bookmarks

Posting Permissions

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