This may or may not solve your problem, 3 column sized by percents uses floats, containing div sizes verticly to accomadate the tallest of the 3 panels, floats must appear first inline before middle panel, IE works funny with this, thinks this layout is naturaly inline, IE hack can be seen in style.
This works good for lots of stuff, other center margined elements may appear (#mid_con) and will stack, only problem is if left and right panel heights are shorter than first middle panel the second middle panel will take up the whole #tub_con in width cuz is 100% appearing stacked directly under first middle div. This can be fixed by giving a static width to (#mid_con), it will then always center and stay same size no matter if IE is centering it in the remaining space after floats or centers it to full width. if given a static width IE hack not needed, play with it and have fun. Appears that float does not remove a div completely from normal flow in IE, seems it just pushes proceeding elements to appear and conform to the left and right of the two floats,
<!--BEGIN HEADER-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>float3col demo</title>
<style>
#tub_con{
display:block;
position:relative;
text-align:center;
width:500px;
height:auto;
margin-left:auto;
margin-right:auto;
border: solid #000000;
}
#left_nav{
display:block;
position:relative;
float:left;
height:80px;
width:30%;
max-width:30%;
border: solid #000000;
}
#right_nav{
display:block;
position:relative;
float:right;
height:80px;
width:30%;
border: solid #000000;
}
#mid_cont{
display:block;
position:relative;
padding-top:5px;
margin-left:auto;
margin-right:auto;
height:auto;
width:35%;
border: solid #f86fff;
}
*html #mid_cont{
display:block;
position:relative;
padding-top:5px;
margin-left:auto;
margin-right:auto;
height:auto;
width:100%;
border: solid #f86fff;
}
</style>
</head>
<body style="text-align:center;">
<div id="tub_con">
<div id="left_nav"></div>
<div id="right_nav">
</div>
<div id="mid_cont">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</div>
<!--Test the stacking problem
<div id="mid_cont">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</div>-->
<div style="clear:both;"></div>
</div>
<p style="width:100px; border:solid #000000; margin-left:auto; margin-right:auto;">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</p>
</body>