Mise en forme de 2 div

Bonjour,

J'ai beau chercher et chercher je n'ai vraiment pas trouver de réponse et je doute même de la faisabilité de ce que j'aimerais faire.
Peut être pourrez vous m'aider:

Je souhaites placer 2 div l'une à coté de l'autre et que ces 2 divs soient ajustables, je m'explique... je souhaiterai obtenir ce resultat:



Avec la div du texte qui forcement se reajuste en fonction du contenu mais la div du trait(background-color ou image de fond) qui se reajuste aussi pour completer l'espace qui reste.

Est ce possible? j'ai tout essayé

Merci beaucoup pour votre aide par avance

Pas de réponses???

Sophie
Modifié par sophie345 (28 Jul 2010 - 12:24)

bonjour

j'avoue ne pas trop comprendre le but, il y aura quoi sur le trait exactement, le nom du produit? Si c'est le cas alors tu peux utiliser des formulaires (label et input avec un border bottom de 1px). Le tout (nom du produit + trait) as-t-il une largeur fixe ?

Edit : un début de réponse :

le html :

<div id="container">
	<div id="laligneverte"></div>
	<div id="container2">
	<span class="nom"> Nom du produit</span> <span> </span>
	</div>
</div>

le css :

#container{
width:200px; /* juste pour donner une largeur max à l'ensemble */
}
#laligneverte{
border-bottom:#33CC33 2px solid ; /* petit bordure verte [cligne] */
margin-top:25px;
}
#container2{
margin-top:-22px; /* on s'amuse a replacer notre texte pour qu'il soit exactement sur la bordure verte */
}
.nom{
color:#33CC33;
border: #fff 3px solid ; /* cachez moi ce vilain bord vert !! */
}

Le résultat :


L'explication : en fait la ligne est présente sur toute la longueur de la div laligneverte grâce à un border. Je m'amuse ensuite à "cacher" la partie de la ligne qui se trouve sous le nom en lui mettant un border plus large et blanc. J'utilise 2 spans qui sont naturellement des éléments inline. Sinon l'autre idée aurait été au lieu d'un border blanc, une image blanche en repeat sur le fond de .nom (à tester?). Le reste est une question de positionner tout correctement. Testé sous FF, chrome et IE7
C'est du GROS bricolage, ça va être pas pratique à maintenir sur tous les navigateurs, c'est sémantiquement pas beau mais c'est un début d'idée. Si quelqu'un veut améliorer ^^
Modifié par saiko_sama (28 Jul 2010 - 13:42)

Merci de ta réponse,

En effet, entretemps j'ai solutionner mon problème, je fais une div avec le trait sur toute la longueur et je lui cale une div en fond blanc avec mon texte par dessus en position absolute... je sais pas si la solution est meilleur ou pas... a tester.
Merci pour ton aide je vais me pencher sur ta soluce pour des questions de compatibilité et autre.

++