vi invito a visitare questo sito prova

sotto all'immagine c'è una tabella che serve a splittare i contenuti in due metà.

Ho fatto un pò di prove per far si che il contenuto rimanga nei limiti del possibile sempre diviso in due metà perfette e ho trovato che la soluzione migliore è usare questo stile:
codice:
table{
	clear:both;
	width: 100%;
	min-width: 140px;
	padding-top:20px;
}

td#news{
table-layout: fixed;
padding-right: 1%;
min-width: 70px;
max-width: 50%;
border-right: 1.3px dashed #000000;
}
td#eventi{
table-layout: fixed;
padding-left: 1%;
min-width: 70px;
max-width: 50%;
}
mi sono però reso conto che così facendo, mentre con Firefox non ho problemi, con Internet Explorer la tabella sfora e spinge il div contenitore verso destra, creando un fastidioso scrolling orizzontale.

qui schematicamente il codice della homepage:

codice:
<div container>
 
...

 <div content>
   <table>
   <tr>
    <td news>titolo news</td>
    <td eventi>titolo eventi</td>
   </tr>
   <tr> 
       <td news>news</td>
       <td eventi>evento</td>
   </tr>
  </table>
 </div>
</div>
secondo voi cosa ho sbagliato? O come devo agire per avere la massima compatibilità?

grazie a chiunque mi risponda