Bueno, aqui vamos.
Comenzare diciendo que la forma en que ordenas tus elementos no es la ideal: poner las capas
left y
right antes de
contenido, puesto que esta ultima es de mayor importancia.
Lo otro es que no estoy del todo seguro que tipo de problema existe con el "display: table;" para IE (por lo menos para versiones que no sean la 7). Pero si no me equivoco si lo hay.
Con lo del "
display: inline":
"
Inline: Son aquellos elementos que típicamente pueden solo contener texto y otros elementos "Inline". Visualmente no producen línea antes o después."
O sea que no le puedes asignar ancho y alto, como podrias hacer con un elemento de tipo bloque.
http://www.cs.sfu.ca/CC/165/sbrown1/wdgxhtml10/inline.html
Ahora pasemos a tu problema:
Existen diversas formas de conseguir cierto efecto para ordenar los elementos. Cada una tiene sus pro y contras, asi que, esta que te pongo a continuacion no es la mas ideal siempre. Depende de la situacion y gusto. En lo personal casi no la uso, pero la publico por ser mas sencilla en cuanto a codigo.
Basada en una tecnica publicada por Dan Cederholm (simplebits.com).
Utilizaremos los mismos valores que tienes para los anchos (width):
Content: 892px
Contenido: 554px /* Aqui le he agregado 1px para manejar valores pares */
Left: 162px
Right: 162px
Margenes: 169px /* Esto es lo que resta de 892-554-162-162. Ya veras para que se usara. */
Asi que, como dije antes, le daremos prioridad a tu capa de
contenido.
Estructura:
Código:
<div id="content">
<div class="contenido">
Contenido - Lorem Ipsum Dolor Sit Amet
</div>
<div class="left">
Left - Lorem Ipsum Dolor Sit Amet
</div>
<div class="right">
Right - Lorem Ipsum Dolor Sit Amet
</div>
</div>
Código:
#content {
width: 892px;
position: relative;
}
.contenido {
margin: 0px 169px;
width: 554px;
}
.left, .right {
width: 162px;
position: absolute;
}
.left {
top: 0px;
left: 0px;
}
.right {
top: 0px;
right: 0px;
}
Como veras, la finalidad es:
1. Definirle el position: relative a tu capa contenedora, para que los elementos posicionados absolutamente lo hagan en relacion a dicha capa.
2. Asignarle margenes a tu capa contenido, que sera el mismo valor de las capas laterales, mas 7px para generar un margen visual. (Ya con esto podria eliminarse el width para esta capa)
3. Posicionar absolutamente las capas
left y
right, a 0px de la parte superior de la capa contenedora, y a 0px de la izquierda y derecha respectivamente.
Bueno, eso seria basicamente. Ya lo demas depende de el tipo de contenido que tengas.
Si tienes alguna otra duda (o si no quedo claro algo de lo anterior) solo nos dices y te ayudamos.