overflow visible not working with ie8 and google chrome but wokes fines with ie9

overflow visible not working with ie8 and google chrome but wokes fines
with ie9

sorry for my poor english in advance.
i googled and googled and googled but every articles that i found didn't
work for me, so here i am asking for expert help.
i have problem with setting div height to 100% and overflow visible.
everything fine with ie9 but with ie9 compatibility view or google chrome
everything messed up.
to show the problem i put the link here so maybe someone check it out and
would help me please.
as you can see in your browser developer tools, i set top, left and width
for every dives and also i set height:100% and overflow:visible !important
for every dives as well. and even i tried with height: auto too but i
couldn't solve my problem.
so, any help would be appreciated.
as SimonStaton asked i put some part of code here this is part of html i'm
thalking about ,MainWithSideBar
<div class="Main">
<div class="MainWithSideBar" dir="rtl">
<br /><br />
content goes here
</div>
<div class="clearfloat"></div>
</div>
and css would be like this
.Main
{
width: 880px;
left:0;
top:0px;
position:relative;
z-index:12;
background-color:#fff;
font-family:Tahoma ;
font:Tahoma ;
min-height:1600px !important;
padding:0px 0px 80px 10px;
direction:rtl;
text-align:right;
}
.MainWithSideBar
{
width: 700px;
left:0;
top:0px;
position:relative;
z-index:13;
background-color:#fff;
float:left;
direction:rtl;
text-align:right;
font-family:Tahoma ;
font:Tahoma ;
}
.Main{ height: 100%; overflow:visible !important;}
.MainWithSideBar{ height: 100%; overflow:visible !important;}
body{ height: 100%; overflow:visible !important;}