Q:

Horizontal center in div with absolute position and display table

I need a layout that has:

one fixed and one fluid, like the sample code.
and the height of the layout need to be expanded like the sample code.

The problem is that this sample code in IE can't work. The layout can't be centered. Are there any better solutions?
HTML:   
 <div id="wrapper" >
     <div id="left" >
        this is fixed
     </div>
     <div id="right" >
        this is fluid 
     </div>
 </div>

CSS:
 #wrapper {
     max-width :700px ;
     width :100% ;
     display : table;
     position :absolute ;
     left :0 ;
     right :0 ;
     margin-left :auto ;
     margin-right :auto ;
     height:100%;
 }
 #left , #right{
     display : table-cell;
     position :relative ;
 }
 #left {
     background:#123456;
     width :215px ;
 }
 #right {
     background:#dedede;
     width: 100%;
 }

Here is my sample code

A:

You only actually need to float a single element within the wrapper, then put any content you wish to appear on the right of this, outside it.
Demo Fiddle
Given the HTML:
<div class='wrapper'>
    <div class='left'>left hand content goes here</div>
    other content goes here
</div>

Simply use the CSS:
html,body{
    width:!00%;
    height:100%;
    margin:0;
    text-align:center;
}
.wrapper{
    width:700px;
    height:100%;
    background:grey;
    margin:0 auto;
    text-align:left;
}
.left{
    float:left;
    background:#123456;
    width :215px ;
    height:100%;
    background:yellow;
}

