Content disappears behind the menu - html

Question

I have a gwt website and if I use the zoom function of my browser the content is displayed behind the menu. So no one can read the tables.
the used layout code looks like this:
<div id="globalContent" style="width: 100%;">
<table class="" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
<tbody>
<tr>
<td align="left" colspan="2" style="vertical-align: middle;">
<div id="headerContent"> </div>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top; width: 270px">
<div id="navigationContent" class="" style="float: left">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table class="navigationPanel" cellspacing="0" cellpadding="0" style="height: 100%;" aria-hidden="false"> /*menu goes here*/
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="vertical-align: middle;">
<div id="mainContent" style="float: left; width: 100%">
<table class="bodyPanel" cellspacing="0" cellpadding="0" style="height: 775px;"> /* Content goes here /* </table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Edit: Css
#globalContent {
background-color: #F1F1F1;
}
.bodyPanel {
width: 100%;
height: 100%;
background-color: #F1F1F1;
margin-top: 70px;
position: absolute;
}
.navigationPanel { /*border: 2px Black;*/
width: 260px;
max-width: 260px;
height: 100%;
min-height: 800px;
background-color: #F1F1F1;
margin-right: 10px;
position: fixed;
z-index: 1;
margin-top: 70px;
}
When "navigationPanel" has position: fixed and mainContent has position: absolute.
The Content appears right of the menu but it ist 270px to width.
I have to support IE8 so I can't use CSS3 :-(