PB CSS Float et largeur 100%

Bonsoir tout le monde,

J'ai un problème que je n'arrive pas à résoudre depuis un moment et c'est pourquoi je requiers votre aide:
J'ai une page HTML qui se présente comme suit:

<div width="100%">
	<div id="index_calend_titre">
		<div id="index_calend_titre_gauche">
			<a href="index.php?index_mois=-1">
			<img src="./images/index_calend_icon_gauche.png"/>
			</a>
		</div>

		<div id="index_calend_titre_centre">
			October
		</div>
		<div id="index_calend_titre_droit">
			<a href="index.php?index_mois=1">
			<img src="./images/index_calend_icon_droite.png"/>
			</a>
		</div>
	</div>
</div>

et son code CSS ci-dessous

#index_calend_titre{
background-image:url("./images/admin_calend_bleu.png");
background-repeat:repeat-x;
width:100%;
height:30px;
font-size:15px;
text-align:center;
clear:right;
}
	#index_calend_titre_gauche{
	/*background-image:url("./images/fleche_droite.png");*/
	background-repeat:no-repeat;	
	border:solid thin;
	width:40px;
	float:left;
	}
	#index_calend_titre_centre{
	border:solid thin;
	margin-left:41px;
	margin-right:45px;
	height:100%;
	display:inligne;
	}
	#index_calend_titre_droit{
	/*background-image:url("./images/index_calend_img_icon_droite.png");*/
	border:solid thin;
	background-repeat:no-repeat;
	width:40px;	
	float:right;
	}

A l'affichage, je voudrais un truc très simple: une image flèche gauche à gauche, un texte central affichant le mois courant (c'est un calendrier) et a droite une image flèche droite.
Avec mon code ci_dessus je me retrouve avec,
soit les deux icônes (images flèches) bien placé mais le titre qui ne prend pas toute la largeur de la page.
soit une image bien placé et le titre qui prend la place qui lui est permise MAIS l'image de droite se retrouve sur une ligne en dessous. (c'est la configuration si-dessus)

J'ai fait beaucoup d'autre test mais aucun n'est concluant... avez vous une idée pour m'aider?

Merci d'avance et bonne soirée.