[android] css overflow ... I need to fix this

Discussion in 'Web Design' started by cjamesblanton, Aug 26, 2012.

to remove all ads.
  1. cjamesblanton

    cjamesblanton New Member

    Messages:
    9
    Here's the site that I'm working on:
    http://www.james-blanton.com/version2/index.php

    I have this problem with extra space showing up on the right side of the main div area. You'll see what I'm talking about if you scroll to the right and look at the blue bar that I've positioned at the top of the page.

    Using css overflow:hidden in order to fix the problem really isn't an option. That extra space still shows up on android browsers. As you can see in this thread, Android has yet to fix this browser issue:
    http://code.google.com/p/android/issues/detail?id=2118

    I really need to figure out what's causing that extra space. I'm guessing that it has something to do with my relative positioning and my floats.

    Can anyone lend me a hand? I'd really appreciate it.
     
    Last edited: Aug 27, 2012
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    100% width + 20px (10px left & 10px right padding) is more than 100% wide.

    Learn about the W3c Box Model
     
  3. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
  4. Roddy

    Roddy New Member

    Messages:
    117
    In responsive design you can figure things out a lot easier if you use % margins too...

    #main {
    width:63%;
    float: left;
    margin: 1%}
    #aside {
    width:32%;
    float:right;
    margin: 1%;
    padding-top:5px}
     
  5. cjamesblanton

    cjamesblanton New Member

    Messages:
    9
    Thanks, but I'm not too sure that I fully understand this. I've been trying to use some process of elimination to solve the problem, but I'm getting nowhere. I need to finish this website ASAP so I can start putting out job applications again.
     
    Last edited: Aug 27, 2012
  6. cjamesblanton

    cjamesblanton New Member

    Messages:
    9
    Could someone please explain box sizing to me a bit more? Maybe provide me with another example?
     
  7. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I linked to a w3schools page on it. It's pretty much all there. Beyond that: Google
     
  8. cjamesblanton

    cjamesblanton New Member

    Messages:
    9
    Yeeeea I read the articles you guys linked, googled some more articles, and watched some guides on youtube. I still can't seem to fix it.
     
  9. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Put this at the top of your CSS:

    *{box-sizing:border-box;}
     
  10. cjamesblanton

    cjamesblanton New Member

    Messages:
    9
    Fixed it. The solution had nothing to do with box sizing. All I had to do is take the padding off the 1px divider underneath my menu links.
     
  11. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    padding IS part of the "box sizing".
     
  12. JakClark

    JakClark New Member

    Messages:
    128
    You could have used box-sizing as a solution. A good solution too, providing you don't support IE7 and below (we have to support IE7 for now).
     

Share This Page