Probleme de positionnement CSS

Bonjour à tous.

Comme c'est mon premier message sur ce forum, une petite présentation s'impose. Je m'occupe d'une communauté d'une soixantaine joueur d'un MMORPG (World of Warcraft pour être précis) et, actuellement, je suis en train de refondre totalement notre site web en modifiant le design et en ajoutant de nouvelles fonctionnalités.

Pour la partie fonctionnalité, pas de problème (pour le moment) mais pour le design, j'avoue pecher un peu niveau technique.

Ayant découvert le postionnement par CSS il y a peu et plus particulièrement, la notion de "float", j'essaye d'adapter les divers tutoriels trouvé sur le net à mon problème.

Le site que j'envisage de créé est composé d'un bandeau en haut de page, d'un menu sur la gauche et d'un bloc contenant les informations principales au centre. Jusque là c'est très classique. Là où ça se complique c'est que le bloc central contient des bordures spécifiques (une image pour chaque coin + une image pour chaque coté).

J'ai réussi tant bien que mal à placer les images là où il faut mais je n'arrive pas à faire en sorte que la partie centrale de l'image soit extensible verticalement.

Une image vallant 1000 mots, voici le
rendu du prototype actuel. Comme vous pouvez le constater, sous firefox, le div ne grandit pas (le mot "lign2" se situe dans la zone sombre) et sous IE6/7, les divs gauche et droite ne sont pas répétés.

J'ai essayé plusieurs méthodes pour solutionner le problème mais aucune n'a fonctionnée: Ajout de "spacer", Modification des valeurs "float", ajout de div etc...

Je me tourne maintenant vers vous pour m'aider à trouver une éventuelle solution

Le bout de code en question:

<!-- CENTER -->
		<div class="article">
			<div class="article_top">
				<div class="article_top_left">&#160;</div>
				<div class="article_top_right">&#160;</div>
			</div>
			<div class="article_center">
				<div class="article_left">&#160;</div>
				<div class="article_right">&#160;</div>
				ligne1<br/>
				lign2<br/>
			</div>
			<div class="article_bottom">
				<div class="article_bottom_left">&#160;</div>
				<div class="article_bottom_right">&#160;</div>
			</div>
		</div>
		<!-- /CENTER -->

Avec le CSS correspondant:

div.article{
	position:absolute;
	left:300px;
	width:844px;
	background:url('../images/light.jpg') repeat;
	padding:0;
	margin:0;
}

div.article_top{
	background:url('../images/border-top.gif') repeat-x 0 0;
	padding:0px;
	width:844px;
	height:100px;
	z-index:1;
	margin:0px;
	float:none;
}

div.article_top_right{
	float:right;
	background:url('../images/border-top-right.gif');
	top:0px;
	margin:0;
	width:140px;
	height:100px;
	z-index:1;
}

div.article_top_left{
	float:left;
	background:url('../images/border-top-left.gif') no-repeat top right;
	width:140px;
	height:100px;
	z-index:1;
}

div.article_bottom{
	background:url('../images/border-bot.gif') repeat-x 0 0;
	padding:0px;
	width:844px;
	height:76px;
	z-index:1;
	margin:0px;
	float:none;
	
}

div.article_bottom_left{
	float:left;
	background:url('../images/border-bot-left.gif') no-repeat;
	width:140px;
	height:76px;
	margin:0;
	padding:0;
	z-index:1;
}

div.article_bottom_right{
	float:right;
	background:url('../images/border-bot-right.gif') no-repeat top right;
	width:140px;
	height:76px;
	margin:0;
	padding:0;
	z-index:1;
}

div.article_center{
	width:844px;
	height:20px;
	z-index:0;
	margin:0px;
	border:1px solid #ff0000;
	clear:both;
}

div.article_left{
	background:url('../images/border-left.gif') repeat-y 0 0;
	z-index:0;
	width:50px;
	margin:0px;
	float:left;
}

div.article_right{
	background:url('../images/border-right.gif') repeat-y 0 0;
	z-index:0;
	width:58px;
	margin:0px;
	float:right;
}

Merci d'avance.

PS: Je suis par ailleurs ouvert à toutes critiques pouvant m'aider à améliorer ce site