DIV: non voglio il ritorno a capo

[messiah2000]

Ciao ragazzi, ho il seguente codice CSS:

tml,body{margin:5;padding:0}

div#container
{ 
	width: 100%;
	height: 50px;
        margin: 0 auto;   
        text-align: left;
	background-color:cyan;
	display:block;
}

div#main_box_left
{
 	background-color:white;
	border: 1px solid yellow;
	width:250; 
	display: inline;
}

div#main_box_center
{
 	background-color:white;
	border: 1px solid yellow;
	width:450; 
	display: inline;
}

div#main_box_right
{
 	background-color:white;
	border: 1px solid yellow;
	width:250; 
	display: inline;
}

con questo HTML:

<div id="container">
<div id="main_box_left">a</div> 
<div id="main_box_center">a</div>
<div id="main_box_right">a</div>
</div>

Il problema è che quando la dimensione della pagina viene ridotta, gli elementi vanno a capo.
Come posso fissare la disposizione dei 3 box in modo permanente?

Ovvero, anche se le dimensioni della pagina vengono ridotte orizzontalmente, i 3 box devono sempre essere uno accanto all'altro.

Thnaks