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

cjamesblanton

New Member
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:

Roddy

New Member
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}
 

cjamesblanton

New Member
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:

cjamesblanton

New Member
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.
 

cjamesblanton

New Member
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.
 

JakClark

New Member
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.

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).
 
Top