Problemas con DIVS e IE

[anf]

Hola, saludos cordiales amigos, llevo meses leyendo la fantástica información que aquí se postea gracias a vosotros y por fin he decidido registrarme para pediros ayuda.

Estoy actualmente diseñando una página Web table-less con posicionamiento CSS, visualizo con Chrome y pruebo con Firefox, Safari, Opera e IE, todos los navegadores excepto IE muestran las cosas como tienen que salir, estoy mas que harto de Microsoft y su paralelismo independiete al desarrollar su navegador , en el caso que me ocurre ahora tengo este código:

Código PHP:

  // Funciones variopintas, bla bla bla y output final 
print " 
<div id='content_top_left'></div><div id='content_top_right'></div> 
<div id='content'>$r</div> 
<div id='content_bottom_left'></div><div id='content_bottom_right'></div>"; 
?>  
  

Que devuelve en HTML:

Código:

<div id='center'>
  <div id='content_top_left'></div>
  <div id='content_top_right'></div>
  <div id='content'>
    <div id='navegacion'>Opciones de navegación</div>
  </div>
  <div id='content_bottom_left'></div>
  <div id='content_bottom_right'></div>
</div>

Que a su vez tiene este CSS:

Código:

#center {
color: #fff;
width: auto;
text-align: center;
margin: 20px 60px 20px 60px;
padding: 15px;
}
#content_top_left {
background: #ff0000 url(corner_tl.png) top left no-repeat;
float: left;
width: 50%;
height: 50px;
}
#content_top_right {
background: #0000ff url(corner_tr.png) top right no-repeat;
float: right;
width: 50%;
height: 50px;
}
#content {
background-color: #fdfdfd;
padding: 15px;
color: #000000;
}
#content_bottom_left {
background: #0000ff url(corner_bl.png) top left no-repeat;
float: left;
width: 50%;
height: 50px;
}
#content_bottom_right {
background: #ff0000 url(corner_br.png) top left no-repeat;
float: right;
width: 50%;
height: 50px;
}

Y cuyo resultado en Chrome, Firefox, Safari y Opera es este:
h t t p : / / s 3 . s u b i r i m a g e n e s . c o m : 8 1 / i m a g e n / p r e v i o / t h u m p _ 2 8 0 5 3 7 7 n o t i s i e . p n g

Y en Internet Explorer 7 es este:
h t t p : / / s 3 . s u b i r i m a g e n e s . c o m : 8 1 / i m a g e n / p r e v i o / t h u m p _ 2 8 0 5 3 8 0 i s i e . p n g

(Perdon por las direcciones pero si no tengo 30 días de antiguedad no me permite el sistema postearlas.)

Se que tiene que ver con el width: 50%; por que al parecer Internet Explorer lo toma del tamaño total mientras que los demás lo toman del tamaño del DIV contenedor, ¿ sabéis algo al respecto? ¿Desaparecerá Internet Explorer para alivio de muchos? Ójala... Ser diseñador Web y pensar siempre en 2 visiones distintas de la misma Web es una M de miércoles a veces...

Saludos amigos y gracias de antemano.