Items avec légende au dessus disposés en ligne

Bonjour,

Je voudrais faire quelque chose qui me paraît simple, mais je n'y arrive pas. Les seules fois où j'ai obtenu quelque chose qui ressemblait à ce que je veux, ça marchait soit sur Safari, soit sur Firefox, mais jamais sur les deux à la fois.

Alors voilà le problème: j'ai un div conteneur (compris lui même dans un fieldset) de largeur fixe.

A l'intérieur de ce conteneur, j'ai des div (class: "blob-element") composés chacun deux éléments: un textarea et une légende que j'ai placée dans un div (j'ai également essayé avec un span). Je veux que cette légende se place au dessus du textarea et centrée

Et je veux que ces "blob-elements" se mettent les un à côté des autres et que ça aille à ligne dès que nécessaire. J'espère avoir été à peu près clair…

Peut-être un petit schéma serait plus explicite?

___ Fieldset ________________________________________________________
|                                                                   |
|      legend1               legend2             legend3            |
| _________________  _______________________  _____________         |
| | textarea1     |  | textarea2           |  | textarea3 |         |
| |               |  |                     |  |           |         |
| |_______________|  |_____________________|  |___________|         |
|                                                                   |
|                                                                   |
|     legend4           legend5               legend6               |
| _______________  _________________  ________________________      |
| | textarea4   |  | textarea5     |  | textarea6            |      |
| |             |  |               |  |                      |      |
| |_____________|  |_______________|  |______________________|      |
|                                                                   |
|___________________________________________________________________|

HTML:

<fieldset>
	<legend>Titre</legend>
	<div>
		<div class="blob-element">
			<div class="blob-element-legend">PSD</div>
			<html:textarea property="cement.psdString" rows="10" cols="18" />
		</div>
		<div class="blob-element">
			<div class="blob-element-legend">PSV</div>
			<html:textarea property="cement.psvString" rows="10" cols="38" />
		</div>
		<div class="blob-element">
			<div class="blob-element-legend">PFC</div>
			<html:textarea property="cement.pfcString" rows="10" cols="14" />
		</div>
		<!-- […] plusieurs div comme ca -->
	</div>
</fieldset>

CSS qui ne marche pas:

.blob-element {
	margin: 10px;
	display: inline;
}

.blob-element-legend {
	text-align: center;
	margin-bottom: 5px;
	display: inline;
}

Merci d'avance!
Modifié par Mateo (10 Oct 2007 - 05:23)