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

[whiteduke]

Non devi fissare il width per il container in percentuale ma bensi in px.

[messiah2000]

Originariamente inviato da whiteduke
Non devi fissare il width per il container in percentuale ma bensi in px.

E come faccio a sapere la larghezza dello schermo?
Io voglio che sia sempre largo il 100%

[lorenzos]

Inserisci anche i 3 box in percentuale, altrimenti il container rimane tutta la pagina e loo rimangono di quella esatta dimensione anche restringendo....

[whiteduke]

Per prima cosa di consiglio di inserire px nei width dei tre box. Poi ti consiglio di guardarti questo utile esempio
http://www.html.it/layout_css/3cp.php?stile=3cpcolor
Non credo poi siano indispensabili i "display".
Spero che tu possa trovare una soluzione. Ciao
Appoggio lorenzos

[messiah2000]

Grazie 1000 raga

[messiah2000]

Domandina; nel link consiglaito da "whiteduke" ho notato nel css questo codice:

iv#extra{position: absolute; top: 80px; right: 0;
    width: 160px;\width:170px;w\idth:160px;padding: 1em 5px}

Perchè è riporato 3 volte l'attributo width?

[messiah2000]

Scasatemi, è la prima volta che me la prendo con firefox.
Ho un box formattato in un certo modo.
Ora non capisco perchè firefox fa allargare più del dovuto uno dei div.
Se vedete l'immagine allegata, capite la differenza.(Dove cè scritto "ciao ciao...")
Il box superiore è di firefox, quello inferiore di explorer

Sulla destra, firefox mi fa uno strano scherzetto, rovinando la visualizzazione.
Io mi sto sforzando di utilizzare i layer al posto delle tabelle, ma sono proprio un bel casino.
Comunque il codice CSS è il seguente:

div#titolo_box_laterale{
	postition:relative;
	width: 100%;
	background-color: yellow;
	background-image: url(images/header_box_laterale.gif);
	background-position: right center;
	background-repeat: no-repeat;
}

div#titolo_box_laterale font{
	line-height:15px;
	font-family: Verdana,Arial;
	font-size:11px;
	color:black;
	font-weight:bold;
	padding-left:2px;
}

div#contenuto_box_laterale{
	postition:relative;
	width: 100%;
	background-color: #FEFEC5;
	padding-left: 5px;
	padding-righ: 5px;
}

div#contenuto_box_laterale font{;
	font-family: Verdana,Arial;
	font-size:11px;
	color:black;
}

mentre l'html è il seguente:

<div id="box_laterale">
	<div id="titolo_box_laterale"><font>&raquo; Box di prova</font></div>
	<div id="contenuto_box_laterale">
	ciao ciao ciao ciao
	</div>
</div>