Ciao a tutti,
è da poco che sto studiando l'uso dei CSS e ho letto le guide presenti su HTML.it nella sezione CSS.

Sto facendo qualche prova per capire le varie proprietà dei css e dopo aver fatto un layout monolitico di prova, sto provando a realizzare un layout a due colonne.

In problema sono proprio le due colonne (colonna di sinistra e quella di destra), poichè non riesco ad allinearle in orizzontale ed in particolare la colonna di destra si posiziona sotto la colonna di sinistra. Ecco come compare il layout:

Clicca qua

Mentre io vorrei che il layout fosse così:

Clicca qua

Vi posto anche il codice css :
codice:
html,body{
background-color: #006600;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
body{
font-family: arial,sans-serif; 
font-size: 76%;
 text-align: center; /*centra in IE 5.x */
}
#container {
	margin: 0px auto;
	padding:0px 0px 0px 0px;
	background-color: #009900;
	width: 760px;
	border-right: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
}
div#header {
width: 760px;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border: none;
}
div#menu_centrale {
background-color: #FF9900;
width: 760px;
height: 30px;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border: none;
}
div#box_contenitore {
	background-color: #FFFFFF;
	margin: 5px 5px 5px 5px;
	padding:5px 5px 5px 5px;
	border: none;
	width: 740px;
	text-align: left;
	float: left;	
}
div#box_sinistra {
    background-color: #00FFFF;
	float: left;
	width: 140px;
	margin: 0px 0px 0px 0px;
	padding:5px 5px 5px 5px;
}
div#box_destra {
	float: left;	
	background-color: #FFFF00;
	margin-left: 5px;
	padding:5px 5px 5px 5px;
	width: 595px;
}
div#footer {
clear: both; 
background-color: #FF9900;
margin: 0px 0px 0px 0px ;
padding:5px 5px 5px 5px;
border: none;
width: 750px;
height: 50px;
}
Codice HTML :
codice:
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/script/css/layuot4.css" rel="stylesheet" type="text/css">
</head>
<body>

<div  id="container">
<div id="header"><h1>HEADER</h1></div>   
<div id="menu_centrale"><h4>Navigazione centrale</h4></div>

<div id="box_contenitore">
<div id="box_sinistra"><h2>Colonna di Sinistra </h2></div>
<div id="box_destra">
<h2>Colonna di destra un cui si sviluppa il contenuto</h2>    
</div> 
</div> 

<div id="footer"><h2>Footer</h2></div>

</div>
</body>
</html>
Come potete vedere il box della colonna di destra e il box della colonna di sinistra, si trovano in un terzo div (div_contenitore). Ho notato che eliminando il DIV_CONTENITORE il layuot è visualizzato perfettamente e le due colonne in questione si allineano perfettamente in orizzontale.....solo che in tal caso non riesco ad ottenere lo sfondo bianco sotto alle due colonne.
Qualcuno di voi è così gentile da potermi aiutare a capire dove è che sbaglio??
Ho provato in vari modi ma non riesco proprio a capire dove sia l'errore e perchè non funzioni correttamente.

Grazie
Ciao Ciao