content overflows div - html

Question

SOLVED:
I have a demo which works on jsFiddle, but the same one doesn't work on other site. You will see the .right_side_header class overflow onto the next line, which is under the main_container-->header--->class. Why is this so? It is 763px, I've double checked the pixels for every box, but it overflows. Can someone please tell me why? If you inspect the element, and uncheck the width of 763px, it doesn't overflow.
Here's the code for some of the header css:
.header {
display: block;
padding-top: 33px;
padding-left: 30px;
padding-right: 30px;
margin-left:auto;
margin-right:auto;
width: 900px;
}
.right_side_header {
display: inline-block;
vertical-align: top;
padding-top: 35px;
width: 763px;
}
img.globe {
display: inline;
}
#globe-logo {
display: inline;
position: relative;
z-index: 9000;
}
span.letter_logo {
font-family: HelveticaBlack;
font-size: 41px;
height: 41px;
line-height: 1;
margin-left: auto;
margin-right: auto;
text-align: center;
text-shadow: 1px 1px 0px rgba(245, 245, 245, 0.35), -1px -1px 0px rgba(245, 245, 245, 0.35);
}
div.letter_logo_container {
text-align: center;
display: block;
line-height: 1;
width: 621px;
}
and here is the code for the nav_bar css:
div.nav_phone {
height: 18px;
padding-top: 3px;
width: 621px;
display: inline-block;
}
span.sales_ph_num {
font-family: HelveticaItalic;
font-size: 11.5px;
color: #c10d24;
text-shadow: 1px 1px 0px rgba(245, 235, 236, 0.4), -1px -1px 0px rgba(245, 235, 236, 0.4);
}
div.sales_ph_num {
text-align: center;
display: inline-block;
vertical-align: top;
width: 110px;
}
.nav_bar {
background-image: url("132/nav_bar.png");
background-repeat: no-repeat;
height: 18px;
width: 621px;
position: relative;
}
div#links {
line-height: 1;
position: absolute;
top: 50%;
left: 119px;
margin: -6px auto 0 auto;
font: 12px HelveticaMedium;
text-align: center;
text-shadow: 1px 1px 0px rgba(237, 237, 237, 0.5), -1px -1px 0px rgba(237, 237, 237, 0.5);
}
#Products {
margin-left: 36px;
}
#Terms, #Terms_Nav {
margin-left: 36px;
}
a.Terms, a.Terms:visited, #Home a, #Home a:visited, a#About, a#About:visited,
#About a, #About a:visited {
text-decoration: none;
color: #000000;
cursor:pointer;
}
li#line_break {
margin-top: 12px;
}
#About {
text-decoration: none;
color: #000000;
margin-left: 36px;
margin-right: 35px;
}
and this is the main_body css:
html, body {
width: 100%;
height: 100%;
background-color: #fafafa;
-webkit-overflow-scrolling: touch;
position: relative;
overflow-x: hidden;
}
.main_container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-o-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
position: absolute;
left: -9999em;
}
and theres a css that does a reset:
* {
margin: 0;
padding: 0;
}
Thank you for any help.

Answer 1

Remove the top: -61px; from div.ad_banner.
Also if you are having a loading screen I would recommend having some kind of simple animation just so it doesn't look like the page has died.

Answer 2

You have limited your right_side_header class to 763px, also your sales_ph_num class is limited to 110px.
But on jsfiddle you have set 900px and 137px respectevly.
Just set same values like you did on jsfiddle. =))

Answer 3

SOLUTION:
ok this issue was bugging me for awhile, and i don't understand why this is. i noticed some extra 1 or 2 pixels of whitespace between the sales_ph_num div and the nav_bar div, there shouldn't have been any. then i saw that i was using inline-block, searched on SO for inline-block and unaccounted whitespace, and there you go. i had used inline block with 2 or 3 divs, and it was adding extra whitespace, which was making the content overflow since every box had a width.
if you have two divs side by side, with one div as inline, and the other inline-block, and you place the div tags in html on separate lines, white space is added:
<div class="container_1000px">
<div class="container">
My content.
</div>
<div class="next_container">
Next content.
</div>
</div>
.container_1000px
{
width: 1000px;
}
.container
{
display: inline;
width:960px;
}
.next_container
{
display: inline-block
width: 40px;
}
this will overflow because extra whitespace is added between the inline and inline-blocked div.
the solution is to place each divs on one line.
<div class="container_1000px"><div class="container">My content.</div><div class="next_container">Next content.</div></div>
and no extra whitespace will be added. thanks again.
Can anyone explain to me why this happens and why it should/shouldn't?